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tujuan perbaikan isi adalah tanggung jawab dari masing-masing penulis. 
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keakuratan isi kutipan tetap menjadi tanggung jawab dan hak diberikan pada 
penulis dan pemilik asli. Penulis bertanggung jawab penuh terhadap setiap 
perawatan (perbaikan) dalam menyusun informasi dan bahan dalam buku teks 
ini. 

Penerbit tidak bertanggung jawab atas kerugian, kerusakan atau 
ketidaknyamanan yang disebabkan sebagai akibat dari ketidakjelasan, 
ketidaktepatan atau kesalahan didalam menyusun makna kalimat didalam buku 
teks ini. 
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KATA PENGANTAR 


Puji syukur kami panjatkan kepada Tuhan yang Maha Esa atas tersusunnya 
buku teks ini, dengan harapan dapat digunakan sebagai buku teks untuk Peserta 
Didik Sekolah Menengah Kejuruan (SMK) Bidang Studi Keahlian Teknologi 
Informasi dan Komunikasi, Program Keahlian Teknik Komputer dan Informatika. 

Penerapan kurikulum 2013 mengacu pada paradigma belajar kurikulum abad 21 
menyebabkan terjadinya perubahan, yakni dari pengajaran (teaching) menjadi 
BELAJAR (learning), dari pembelajaran yang berpusat kepada guru ( teachers- 
centered) menjadi pembelajaran yang berpusat kepada peserta didik ( student- 
centered), dari pembelajaran pasif (pasive learning) ke cara belajar peserta didik 
aktif ( active learning-CBSA) atau Student Active Learning-SAL. 

Buku teks Pemrograman Web ini disusun berdasarkan tuntutan paradigma 
pengajaran dan pembelajaran kurikulum 2013 diselaraskan berdasarkan 
pendekatan model pembelajaran yang sesuai dengan kebutuhan belajar 
kurikulum abad 21, yaitu pendekatan model pembelajaran berbasis peningkatan 
keterampilan proses sains. 

Penyajian buku teks untuk Mata Pelajaran Pemrograman Web ini disusun 
dengan tujuan agar supaya peserta didik dapat melakukan proses pencarian 
pengetahuan berkenaan dengan materi pelajaran melalui berbagai aktivitas 
proses sains sebagaimana dilakukan oleh para ilmuwan dalam melakukan 
eksperimen ilmiah (penerapan scientifik), dengan demikian peserta didik 
diarahkan untuk menemukan sendiri berbagai fakta, membangun konsep, dan 
nilai-nilai baru secara mandiri. 

Kementerian Pendidikan dan Kebudayaan, Direktorat Pembinaan Sekolah 
Menengah Kejuruan, dan Direktorat Jenderal Peningkatan Mutu Pendidik dan 
Tenaga Kependidikan menyampaikan terima kasih, sekaligus saran kritik demi 
kesempurnaan buku teks ini dan penghargaan kepada semua pihak yang telah 
berperan serta dalam membantu terselesaikannya buku teks siswa untuk Mata 
Pelajaran Pemrograman Web kelas X /Semester 1 Sekolah Menengah Kejuruan 
(SMK). 


Jakarta, 12 Desember 2013 
Menteri Pendidikan dan Kebudayaan 


Prof. Dr. Mohammad Nuh, DEA 
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GLOSARIUM 


CERN adalah Organisation Europeenne pour la Recherche Nucleaire, Pusat 
Penelitian Fisika Partikel Eropa. 

Domain adalah Pola penamaan host di Internet. 

HTML adalah Hyper Text Markup Language, sebuah bahasa markup yang 
digunakan untuk membuat sebuah halaman web. 

HTTP adalah Hyper Text Transfer Protocol, tata cara komunikasi untuk 
mentransfer Web dari server ke komputer lain. 

ISP adalah Internet Service Provider, perusahaan pemberi jasa akses Internet. 

Server adalah komputer yang memberikan layanan di jaringan. 

Tag HTML adalah kata kunci (nama tag) yang dikelilingi oleh kurung sudut 
seperti <html> 

W3C adalah World Wide Web Consortium organisasi yang mengembangkan 
teknologi web beralamat di www.w3c.org. 

Web browser adalah sebuah perangkat lunak aplikasi yang memungkinkan 
pengguna mengakses Web atau Server di jaringan. 

WWW; World Wide Web sering di singkat Web. 
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PETA KEDUDUKAN BAHAN AJAR 


Peta kedudukan bahan ajar merupakan suatu diagram yang menjelaskan 
struktur mata pelajaran dan keterkaitan antar mata pelajaran dalam satu 
kelompok bidang paket keahlian. Gambar 1 menjelaskan peta kedudukan bahan 
ajar untuk paket keahlian rekayasa perangkat lunak . Kelompok Cl merupakan 
kelompok mata pelajaran wajib dasar bidang kejuruan. C2 merupakan kelompok 
mata pelajaran wajib dasar kompetensi kejuruan dan C3 merupakan kelompok 
mata pelajaran wajib paket keahlian. 



Gambar 1. Peta Kedudukan Bahan Ajar Kelompok C2 
Mata Pelajaran Pemrograman Web 
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Sementara itu peta konsep mata pelajaran menjelaskan struktur urutan 
kegiatan belajar dan topik materi pelajaran. Gambar 2 dibawah ini menjelaskan 


peta konsep mata pelajaran Pemrograman web untuk kelas X semester 1 

gambar 



audio 

video & animasi 

Multimedia 

konsep form 

gambar map 

Formulir halaman web 

format form 


anatomi link 



Gambar 2. Peta Konsep Mata Pelajaran Pemrograman Web Kelas X Semester 1 
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BAB 1 PENDAHULUAN 

A.Diskripsi 

Pemrograman web 1 merupakan salah satu mata pelajaran wajib dasar pada 
dasar program keahlian Teknik Komputer dan Informatika (TKI). Berdasarkan 
struktur kurikulum mata pelajaran Pemrograman web 1 disampaikan dikelas X 
semester 1 yang disampaikan dalam waktu 4 jam pelajaran per minggu. 

Pada semester 1 ini materi pemrograman web ditekankan pada pengenalan 
teknologi web, profesi yang berhubungan dengan dunia web sehingga peserta 
didik mendapatkan gambaran akan dunia kerja nantinya. Perintah-perintah dari 
HTML untuk pembuatan halaman web juga merupakan materi pokok pada 
pemrograman web 1. Dikenalkan juga pengintegrasian komponen multimedia 
kedalam teknologi web sehingga dapat menyajikan sebuah halaman web sesuai 
dengan kaidah/aturan yang berlaku. 


B. Prasyarat 

Untuk kelancaran pencapaian kompetensi dalam mata pelajaran 
pemrograman web ini dibutuhkan beberapa peryaratan baik pengetahuan 
maupun ketrampilan dasar. Persyaratan tersebut antara lain ialah: peserta didik 
mempunyai kompetensi dalam hal pemanfaatan teknologi informasi, seperti 
mengoperasikan hardware komputer dan mengoperasikan perangkat lunak 
aplikasi. Perangkat lunak aplikasi tersebut antar lain ialah pengolah data untuk 
menganalisis data hasil eksperimen, pengolah kata untuk membuat laporan dan 
aplikasi presentasi untuk mengkomunikasikan dan mempresentasikan hasil 
laporan. 

C. Petunjuk 

Buku pedoman siswa ini disusun berdasarkan kurikulum 2013 yang 
mempunyai ciri khas penggunaan metode scientific. Buku ini terdiri dari dua bab 
yaitu bab satu pendahuluan dan bab dua pembelajaran. Dalam bab pendahuluan 
beberapa yang harus dipelajari peserta didik adalah diskripsi mata pelajaran 
yang berisi informasi umum, rasionalisasi dan penggunaan metode scientifik. 
Selanjutnya pengetahuan tentang persyaratan, tujuan yang diharapkan, 
kompetensi inti dan dasar yang akan dicapai serta test kemampuan awal. 
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Bab dua menuntun peserta didik untuk memahami deskripsi umum tentang 
topik yang akan dipelajari dan rincian kegiatan belajar sesuai dengan kompetensi 
dan tujuan yang akan dicapai. Setiap kegiatan belajar terdiri dari tujuan dan 
uraian materi topik pembelajaran, tugas serta test formatif. Uraian pembelajaran 
berisi tentang diskripsi pemahaman topik materi untuk memenuhi kompetensi 
pengetahuan. Uraian pembelajaran juga menjelaskan deskripsi unjuk kerja atau 
langkah-langkah logis untuk memenuhi kompetensi skill. 

Tugas yang harus dikerjakan oleh peserta didik dapat berupa tugas praktek, 
eksperimen atau pendalaman materi pembelajaran. Setiap tugas yang dilakukan 
melalui beberapa tahapan scientifik yaitu : 1) melakukan pengamatan setiap 
tahapan unjuk kerja 2) melakukan praktek sesuai dengan unjuk kerja 3) 
mengumpulkan data yang dihasilkan setiap tahapan 4) menganalisa hasil data 
menggunakan analisa diskriptif 5) mengasosiasikan beberapa pengetahuan 
dalam uraian materi pembelajaran untuk membentuk suatu kesimpulan 6) 
mengkomunikasikan hasil dengan membuat laporan portofolio. Laporan tersebut 
merupakan tagihan yang akan dijadikan sebagai salah satu referensi penilaaian 

D.Tujuan Akhir 

Setelah mempelajari uraian materi dalam bab pembelajaran dan kegiatan 
belajar diharapkan peserta didik dapat memiliki kompetensi sikap, pengetahuan 
dan ketrampilan yang berkaitan dengan materi: 

■ Teknologi aplikasi web 

■ Format teks halaman web 

■ Multimedia pada halaman web 

■ Hyperlink halaman web 

■ Format halaman web 
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E.Kompetensi inti dan kompetensi dasar 

1. Kompetensi Inti 1 : Menghayati dan mengamalkan ajaran agama yang 

dianutnya. 

Kompetensi Dasar: 

1.1. Memahami nilai-nilai keimanan dengan menyadari hubungan 
keteraturan dan kompleksitas alam dan jagad raya terhadap kebesaran 
Tuhan yang menciptakannya 

1.2. Mendeskripsikan kebesaran Tuhan yang menciptakan berbagai sumber 
energi di alam 

1.3. Mengamalkan nilai-nilai keimanan sesuai dengan ajaran agama dalam 
kehidupan sehari-hari. 

2. Kompetensi Inti 2: Menghayati dan Mengamalkan perilaku jujur, disiplin, 
tanggung jawab, peduli (gotong royong, kerjasama, toleran, damai), santun, 
responsif dan proaktif dan menunjukan sikap sebagai bagian dari solusi atas 
berbagai permasalahan dalam berinteraksi secara efektif dengan lingkungan 
sosial dan alam serta dalam menempatkan diri sebagai cerminan bangsa 
dalam menempatkan diri sebagai cerminan bangsa dalam pergaulan dunia. 
Kompetensi Dasar: 

2.1. Menunjukkan perilaku ilmiah (memiliki rasa ingin tahu; objektif; jujur; 
teliti; cermat; tekun; hati-hati; bertanggung jawab; terbuka; kritis; kreatif; 
inovatif dan peduli lingkungan) dalam aktivitas sehari-hari sebagai wujud 
implementasi sikap dalam melakukan percobaan dan berdiskusi 

2.2. Menghargai kerja individu dan kelompok dalam aktivitas sehari-hari 
sebagai wujud implementasi melaksanakan percobaan dan melaporkan 
hasil percobaan. 

3. Kompetensi Inti 3: Memahami,menerapkan dan menganalisis pengetahuan 
faktual, konseptual dan prosedural berdasarkan rasa ingintahunya tentang 
ilmu pengetahuan, teknologi, seni, budaya, dan humaniora dalam wawasan 
kemanusiaan, kebangsaan, kenegaraan, dan peradaban terkait penyebab 
fenomena dan kejadian dalam bidang kerja yang spesifik untuk memecahkan 
masalah. 

Kompetensi Dasar: 

3.1. Memahami konsep teknologi aplikasi web 

3.2. Memahami format teks pada halaman web 
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3.3. Memahami format tabel pada halaman web 

3.4. Memahami tampilan format multimedia 

3.5. Memahami format kaitan pada halaman web 

3.6. Memahami format formulir pada halaman web 

4. Kompetensi Inti 4: Mengolah, menalar, dan menyaji dalam ranah konkret dan 
ranah abstrak terkait dengan pengembangan dari yang dipelajarinya di 
sekolah secara mandiri, dan mampu melaksanakan tugas spesifik dibawah 
pengawasan langsung. 

Kompetensi Dasar: 

4.1. Menyajikan pelbagai teknologi pengembangan aplikasi web 

4.2. Menyajikan teks dalam format tertentu pada halaman web 

4.3. Menyajikan tabel pada halaman web 

4.4. Menyajikan tampilan format multimedia pada halaman web 

4.5. Menyajikan format kaitan pada halaman web 

4.6. Menyajikan formulir pada halaman web 

4.7. Menyajikan style tertentu pada halaman web 
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BAB 2 PEMBELAJARAN 
A.Diskripsi 

Pemrograman web 1 merupakan salah satu mata pelajaran wajib dasar pada 
dasar program keahlian Teknik Komputer dan Informatika (TKI). Berdasarkan 
struktur kurikulum mata pelajaran Pemrograman web 1 disampaikan dikelas X 
semester 1 yang disampaikan dalam waktu 4 jam pelajaran per minggu. 

Pada semester 1 ini materi pemrograman web ditekankan pada pengenalan 
teknologi web, profesi yang berhubungan dengan dunia web sehingga peserta 
didik mendapatkan gambaran akan dunia kerja nantinya. Perintah-perintah dari 
HTML untuk pembuatan halaman web juga merupakan materi pokok pada 
pemrograman web 1. Dikenalkan juga pengintegrasian komponen multimedia 
kedalam teknologi web sehingga dapat menyajikan sebuah halaman web sesuai 
dengan kaidah/aturan yang berlaku. 
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B. Kegiatan Belajar 

1. Kegiatan Belajar 1: Profesi dalam Pengembangan Aplikasi Web 
a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 1 ini Peserta Didik diharapkan dapat: 

1) Memahami profesi dalam bidang Teknologi Informasi 

2) Memahami profesi dalam pengembangan aplikasi web 

3) Memahami sejarah web 

4) Memahami cara kerja web 

5) Menyajikan cara kerja web 


b. Uraian Materi 

1) Profesi dalam bidang Teknologi Informasi 

Saat ini ada banyak aneka profesi di bidang Teknologi Informasi atau Tl. 
Perkembangan dunia Tl telah melahirkan bidang baru yang tidak terlepas dari 
tujuan utamanya yaitu untuk semakin memudahkan manusia dalam melakukan 
segala aktifitas. Munculnya bidang Tl yang baru juga memunculkan profesi di 
bidang Tl yang semakin menjurus sesuai dengan keahlian masing-masing. 
Secara umum, pekerjaan di bidang teknologi informasi setidaknya dapat 
dikelompokan sesuai bidangnya, misalnya. 

a. Kelompok pertama, adalah mereka yang bergelut di dunia perangkat lunak 
(Software), baik mereka yang merancang sistem operasi, database maupun 
sistem aplikasi. 

Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti : 

*Sistem analis, merupakan orang yang bertugas menganalisa system yang akan 
diimplementasikan, mulai dari menganalisa system yang ada, kelebihan dan 
kekurangannya, sampai studi kelayakan dan desain system yang akan 
dikembangkan 

* Programer, merupakan orang yang bertugas mengimplementasikan rancangan 
system analis, yaitu membuat program ( baik aplikasi maupun system operasi ) 
sesuai system yang dianalisa sebelumnya. 
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* Web designer, merupakan orang yang melakukan kegiatan perencanaan, 
termasuk studi kelayakan, analisis dan desain terhadap suatu proyek pembuatan 
aplikasi berbasis web. 

* Web programmer, merupakan orang yang bertugas mengimplementasikan 
rancangan web designer, yaitu membuat program berbasis web sesuai desain 
yang telah dirancang sebelumnya. 

b. Kelompok kedua, adalah mereka yang bergelut di bidang perangkat keras 
(hardware). 

Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti : 

* Technical engineer, sering juga disebut teknisi, yaitu orang yang berkecimpung 
dalam bidang teknik, baik mengenai pemeliharaan maupun perbaikan perangkat 
system Computer. 

* Networking engineer, adalah orang yang berkecimpung dalam bidang teknis 
jaringan Computer dari maintenance sampai pada troubleshooting-nya. 

c. Kelompok ketiga, adalah mereka yang berkecimpung dalam operasional 
system informasi. 

Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti : 

*EDP Operator, adalah orang yang bertugas mengoperasikan program-program 
yang berhubungan dengan electronic data Processing dalam lingkungan sebuah 
perusahaan atau organisasi lainnya. 

*System Administrator, merupakan orang yang bertugas melakukan administrasi 
terhadap system, memiliki kewenangan menggunakan hak akses terhadap 
system, serta hal-hal lain yang berhubungan dengan pengaturan operasional 
sebuah system. 

2) Profesi dalam pengembangan aplikasi web 

Ada banyak ragam dalam profesi di dalam bidang Teknologi Informasi, 
bagaimana dengan profesi yang berada dalam lingkungan pengembangan 
aplikasi web? Berikut ini adalah profesi-profesi yang langsung terkait dalam 
pengembangan aplikasi web, diantaranya : 
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Web Designer 

Seorang desainer Web adalah orang yang bertanggung jawab untuk menentukan 
tampilan sebuah website. Tugasnya adalah pendisainan tampilan situs (web) 
mulai dari pengolahan gambar, tata letak, warna, dan semua aspek visual situs. 
Fokus utama mereka adalah tampilan / layout dari web. Mereka lebih konsen 
dengan bagaimana halaman terlihat dan apakah berfungsi sempurna ketika 
sudah diberikan bahasa pemrograman. Didalam pendandanan suatu situs 
seorang Web Designer harus menguasai : 

HTML, DHTML 
Pengolah Gambar 
Animasi, Movie (Film) 

Web Programmer 

Web Programmer bertugas dalam melakukan pengcodingan atau pemograman 
sebuah website agar dinamis, dimana agar sebuah web tersebut dapat telihat 
mudah bagi seorang web admin. 

Jika situs yang akan dibuat mempunya fasilitas interaksi antara pengunjung dan 
situs misalnya menyangkut dengan transaksi, input output data dan database 
maka seorang Web Programmer yang akan mengerjakannya dengan membuat 
aplikasi-aplikasi yang berkerja diatas situs (web). Penguasaan yang biasanya 
harus dikuasai pada umumnya oleh Web Programmer: 

- CGI Perl, PHP, MySQL (Unix base) 

- ASP (NT base) 

- Java Script dan Applet 

Web Administrator 

Tugasnya adalah untuk memaintenance suatu server, mengerti akan Sistem 
Operasi Server, baik itu mulai dari instalasi sampai kepada masalah 
(troubleshooting), biasanya seorang Web Administrator harus menguasai : 

- OS Unix (Llnux, FreeBSD, dll) 

-OS NT 

- Jaringan (LAN, WAN, Intranet) 

- Keamanan Server 
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Web Master 

Seoarang Web Master adalah seorang yang mengerti akan kesemua hal mulai 
dari disain, program dan keamanan server namun tidak terlalu turut mencampuri 
ke masing-masing divisi, cukup dengan mempertanggun jawabkan atas jalannya 
suatu situs (web). Penguasaan yang harus dimiliki : 

- HTML, DHTML 

- CGI Perl, PHP, MySOL, ASP, Java 

- Penguasaan bermacam OS (Operating System) 

- Keamanan Server 

- Jaringan (LAN, WAN, Intranet) 

Web Developer 

Kegiatan diatas secara keseluruhan dinamakan suatu team yang dinamakan 
Web Developer. 

Web developer memberi bantuan seperti konsultasi web, konsep web yang akan 
di buat, membangun sebuat website.. 

Dari semua jenis pekerjaan diatas tidak semua adalah sebuah profesi karena 
tidak semua orang ahli dalam bidang tersebut. Yang bisa dikatakan sebagai 
sebuah profesi yaitu jika seseorang sudah ahli di dalam bidang pekerjaan 
tersebut. Jika di pekerjaan diatas yang bisa dikatakan sebagai sebuah profesi 
adalah web designer, web programmer, web administrator, web master dan web 
developer karena dalam bidang tersebut seseorang memang sudah memiliki 
keahlian di dalamnya. 

3) Sejarah web 

Internet adalah jaringan komputer yang saling terhubung. Tidak ada perusahaan 
yang memiliki internet, yang merupakan upaya kerja sama diatur oleh sistem 
standar dan aturan. Tujuan dari menghubungkan komputer bersama-sama, tentu 
saja, adalah untuk berbagi informasi. Ada banyak cara informasi dapat dikirimkan 
antar komputer, termasuk email, transfer file (File Transfer Protocol), dan banyak 
layanan yang lebih khusus yang dibangun dalam layanan Internet. Metode ini 
standar untuk mentransfer data atau dokumen melalui jaringan dikenal sebagai 
protokol. 


9 | P a g e 






World Wide Web, biasa lebih terkenal disingkat sebagai WWW adalah suatu 
ruang informasi yang dipakai oleh pengenal global yang disebut URL (Uniform 
Resource Locator) untuk mengenal pasti sumber daya berguna. WWW sering 
dianggap sama dengan Internet secara keseluruhan, walaupun sebenarnya ia 
hanyalah bagian daripada Internet. 

WWW merupakan kumpulan web server dari seluruh dunia yang mempunyai 
kegunaan untuk menyediakan data dan informasi untuk dapat digunakan 
bersama. WWW adalah bagian yang paling menarik dari Internet. Melalui web, 
para pengguna dapat mengakses informasi-informasi yang tidak hanya berupa 
teks tetapi bisa juga berupa gambar, suara, video dan animasi. 

Kegunaan ini tergolong masih baru dibandingkan surat elektronik, sebenarnya 
WWW merupakan kumpulan dokumen yang tersimpan di peladen web, dan yang 
peladennya tersebar di lima benua termasuk Indonesia yang terhubung menjadi 
satu melalui jaringan Internet. Dokumen-dokumen informasi ini disimpan atau 
dibuat dengan format HTML (Hypertext Markup Language). 

Suatu halaman dokumen informasi dapat terdiri atas teks yang saling terkait 
dengan teks lainnya atau bahkan dengan dokumen lain. Keterkaitan halaman 
lewat teks ini disebut pranala. Dokumen infomasi ini tidak hanya terdiri dari teks 
tetapi dapat juga berupa gambar, mengandung suara bahkan klip video. Kaitan 
antar-dokumen yang seperti itu biasa disebut hipermedia. 

Jadi dapat disimpulkan bahwa WWW adalah sekelompok dokumen multimedia 
yang saling bertautan dengan menggunakan tautan hiperteks. Dengan mengeklik 
pranala ( hyperlink ), maka para pengguna bisa berpindah dari satu dokumen ke 
dokumen lainnya. 

WWW adalah suatu program yang ditemukan oleh Tim Berners-Lee pada tahun 
1991. Awalnya Berners-Lee hanya ingin menemukan cara untuk menyusun 
arsip-arsip risetnya. Untuk itu, beliau mengembangkan suatu sistem untuk 
keperluan pribadi. Sistem itu adalah program peranti lunak yang diberi nama 
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Enquire. Dengan program itu, Berners-Lee berhasil menciptakan jaringan yang 
menautkan berbagai arsip sehingga memudahkan pencarian informasi yang 
dibutuhkan. Inilah yang kelak menjadi dasar dari sebuah perkembangan pesat 
yang dikenal sebagai WWW. 



Gambar. 1.1 Tim Berners-Lee (Sumber: http://www.hdwallpapersinn.com) 

WWW dikembangkan pertama kali di Pusat Penelitian Fisika Partikel Eropa 
(CERN : Organisation Europeenne pour la Recherche Nucleaire), Jenewa, 
Swiss. Pada tahun 1989 Berners-lee membuat pengajuan untuk proyek 
pembuatan hiperteks global, kemudian pada bulan Oktober 1990, 'World Wide 
Web' sudah dapat dijalankan dalam lingkungan CERN. Pada musim panas tahun 
1991, WWW secara resmi digunakan secara luas pada jaringan Internet. 
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AboutCERN Students & Educators Scientlsts CERN^ople 


. Physids Computing Engineering Updates 


Indonesia and Bangladesh strengthen 
tieswithCERN 


Christine Sutton 



In a ceremony in Jakarta, Indonesia, on 21 October, the Indonesia n Institute of 
Sciences (LIPI)signed a Memorandum of Understanding with the ALICE 
collaboration, marking the first official collaboration between an Indonesia n institute 
and an experiment at CERN. Paolo Giubellino, the ALICE Spokesperson, and 
Emmanuel Tsesmelis, CERN's Deputy Head of International Rdations, attended the 
signing ceremony, at which LIPI was represented by Lukman Hakim, the institute’s 
chair, and Laksana Tri Handoko, the ALICE LIPI team leader. 

With the agreement, LIPI will initially contribute at ALICE in the area of grid 
computing. The team there has installedtwo clusters, in Bandung and Cibinong, 
which have been connected to the ALICE grid. There is also a strong interest in the 
ALICE 02 Project. In addition, the high-energy physics group being created at LIPI is 
expected to contribute to the ALICE physics programme and to the upgrade of the 
experiment. The agreement exemplifies LIPI's effort to be more active and gain 
intemational recognition as a research centre of excellence. 


AboutCERN 

Computing 

Engineering 

Experiments 

How a detector works 


UPDATES 

Power napping fbr detectors & 

6 Dec 2013 - The Compact Linear 
Coliider (CLIC) study i s looking at 
Silicon capacitors tohelpwlth 
power puisi ng 

UNESCO awards Niels Bohr Gold 
Medal to CERN 

5 Dec 2013 -Ata ceremony today 
in Copenhagen, Denmark, CERN 
Director-General Rolf Heuer 
accepted the Niels Bohr Gold 
Medal on behatf of CERN 

Open Access publishing initiative 
to start in 2014 

S Dec 2013 - CERN today confirms 
thatthe Open Access publishing 
initiative SC0AP3 will start on 1 
January 2014 


more updates 


Gambar. 1.2 Website CERN http://home.web.cern.ch 


Standart Web 

HTML (Hypertext Markup Language ) merupakan bahasa standar web yang didefinisikan 
dan dikelola penggunaannya oleh W3C (World Wide Web Consurtium). HTML dibuat dan 
dikembangkan oleh Tim Berners-Lee. Selanjutnya , bahasa tersebut dipopulerkan oleh 
browser Mosaic. Selama tahun 90-an telah muncul berbagai versi HTML dengan 
berbagai macam fiturnya. Versi HTML yang ada tersebut antara lain: 

1) Versi 1.0 

Merupakan versi pertama setelah lahirnya HTML dan mempunyai kemampuan 
seperti untuk heading, paragraph, hypertext, list, cetak tebal, dan cetak miring 
pada teks. Selain itu juga dukungan peletakan image pada dokumen dengan 
tidak memperbolehkan peletakan teks di sekelilingnya (wrapping). 
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2) Versi 2.0 

Diliris pada tanggal 14 Januari 1996 dengan beberapa kemampuan tambahan 
seperti penambahan form. Hal ini menjadi pionir untuk membuat sebuah web 
yang interaktif. 

3) Versi 3.0 

Diliris pada tanggal 18 Desember 1997, yang dikenal dengan HTML+. Versi ini 
memiliki beberapa vitur tambahan seperti fitur table dalam paragraph. 

4) Versi 3.2 

Diliris pada buan Mei 1998, merupakan versi terbaru penyempurnaan dari versi 
3.0. 

5) Versi 4.0 

diliris pada tanggal 24 Desember 1999 dengan penambahan beberapa fitur 
seperti adanya link, imagemaps, image, dan lain-lain. 

6) Versi 5.0 

Diliris pada tahun 2009 yang menjadi standar baru untuk HTML, XHTML, dan 
DOM HTML. HTML5 ini merupakan proyek kerja sama antara W3C ( World Wide 
Web Consurtium) dan WHATG (Web Hypertext Application Technology Working 
Group). 


Spesifikasi HTML5 belum final saat ini, tetapi diyakini oleh banyak orang 
akan menjadi standar yang diterima di masa depan. Beberapa browser (lihat 
Tabel 1.1) sudah mendukung HTML5. 


Tabel 1.1 Browser yang mendukung HTML5 


Browser 

Keterangan 

Chrome 

Mulai versi 1.0 

Firefox 

Mulai versi 1.5 

Internet Explorer 

Mulai versi 8 

Opera 

Mulai versi 9.0 

Safari 

Mulai versi 1.3 
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Pada HTML5, dalam menuliskan tag dan atribut dengan huruf kecil 
tidak ada lagi. Diberi kebebasan untuk menggunakan huruf kecil, huruf 
Capital, atau kombinasinya. Bahkan, nilai suatu atribut akan diberi 
tanda petik atau tidak sama saja. Browser tidak lagi mempeduiikan hal- 
hal seperti itu. 


4) Cara kerja web 

Sebuah web browser adalah program perangkat lunak yang gunakan untuk 
mengakses World Wide Web dari Internet. Browser pertama, yang disebut 
NCSA Mosaic, dikembangkan di Pusat Nasional untuk Aplikasi Super 
Komputer di awal 1990-an. Yang mudah digunakan, cukup klak-klik sehingga 
membantu mempopulerkan Web. 

Meskipun banyak browser yang berbeda yang tersedia, Microsoft Internet 
Explorer dan Mozilla Firefox yang jauh yang paling populer. (Banyak 
pengguna Mac lebih memilih browser Safar) Persaingan untuk mendominasi 
pasar telah membawa perbaikan terus-menerus untuk perangkat lunak, 
(keduanya didasarkan pada NCSA Mosaic) 

dapat mendownload Internet Explorer dan Firefox secara gratis dari situs web 
masing-masing perusahaan. Jika sudah memiliki satu browser, dapat menguji 
yang lain. Juga mencatat bahwa ada sedikit perbedaan antara versi Windows 
dan Macintosh. 

Anatomi Browser 

Ketika pertama kali membuka browser web, biasanya dengan mengklik dua 
kali pada icon di desktop komputer, halaman web yang telah ditetapkan 
muncul. Flalaman ini disebut sebagai halaman “home” atau halaman awal. 
Dengan Mozilla Firefox misalnya, mungkin akan dibawa ke halaman awal 
Mozilla atau ke halaman yang dipilih oleh penyedia layanan Internet. Tetapi 
jika ingin, dapat dengan mudah mengubah halaman awal tersebut. 

World Wide Web sampai saat ini adalah bagian yang paling populer dari 
Internet. Setelah menghabiskan waktu di Web akan merasa bahwa tidak ada 
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batas untuk apa yang dapat ditemukan. Web memungkinkan beragam 
komunikasi, juga memungkinkan untuk mengakses dan berinteraksi dengan 
teks, grafis, animasi, foto, audio dan video. 

Jadi apa saja yang membentuk web ini? Pada tingkat yang paling sederhana, 
Web secara fisik terdiri dari komputer pribadi atau perangkat mobile, 
perangkat lunak web browser, sambungan ke penyedia layanan Internet, 
komputer yang disebut server yang disebut hosting dan router dan switch 
yang mengarahkan aliran informasi. 

Ada banyak pilihan perangkat lunak server, tetapi dua yang paling populer 
adalah Apache (perangkat lunak open source untuk server) dan Internet 
Information Services (IIS ) dari Microsoft. Apache tersedia secara bebas 
untuk komputer berbasis Unix dan dapat diinstal pada Mac menjalankan Mac 
OS X. Ada versi Windows juga. Microsoft IIS adalah bagian dari keluarga 
Microsoft. 

Setiap komputer dan perangkat (modem, router, smartphone, mobil, dll) yang 
terhubung ke Internet diberi alamat IP numerik yang unik (IP singkatan dari 
Internet Protocol). Sebagai contoh, komputer yang dihosting google.com 
memiliki alamat IP 173.194.34.99. Semua angka-angka tersebut dapat 
memusingkan, untungnya ada Domain Name System (DNS) yang 
dikembangkan untuk memungkinkan kita merujuk ke server dengan nama 
domainnya, "google.com ", juga. Alamat IP numerik berguna untuk perangkat 
lunak komputer, sedangkan nama domain adalah lebih mudah diakses oleh 
manusia. Pencocokan nama domain ke alamat IP numerik masing-masing 
adalah tugas dari server. 

Hal ini dimungkinkan untuk mengkonfigurasi server web sehingga lebih dari 
satu nama domain dipetakan ke satu alamat IP, sehingga memungkinkan 
beberapa situs untuk berbagi server tunggal. 

Sebuah halaman web adalah dokumen elektronik yang ditulis dalam bahasa 
komputer yang disebut HTML, singkatan dari Hypertext Markup Language. 

Setiap halaman web memiliki alamat yang unik, yang disebut URL atau 
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Uniform Eerources Locator yang mengidentifikasi di mana web server yang 
memuat dokumen web. 

Sebuah website memiliki satu atau lebih halaman web terkait, tergantung 
pada bagaimana itu dirancang. Halaman web pada situs yang dihubungkan 
bersama melalui sistem hyperlink, memungkinkan untuk melompat di antara 
halaman web dengan mengklik pada link. 

Halaman Web bervariasi dalam desain dan konten, tetapi banyak 
menggunakan format majalah tradisional. Di bagian atas halaman adalah 
“header” seperti kop surat atau gambar banner, kemudian daftar item dan 
artikel. Daftar item atau menu biasanya link ke halaman lain atau situs lain. 
Kadang-kadang link ini disusun dalam daftar, seperti indeks. Dapat juga 
kombinasi dari keduanya. Sebuah halaman web mungkin juga menggunakan 
gambar sebagai link ke konten lainnya. 

Bagaimana bisa membedakan mana teks yang ada tautan/link? Link muncul 
dalam warna yang berbeda dari teks - biasanya dengan warna biru dan 
sering digarisbawahi. Bila memindahkan kursor di atas link teks atau melalui 
link grafis, perubahan icon dari panah ke tangan. 

Web adalah media yang dinamis. Untuk mendorong pengunjung untuk 
kembali ke sebuah situs, banyak penerbit web sering memperbarui konten. 
Itulah yang membuat Web sangat menarik. 

Memahami Alamat Web 

World Wide Web adalah koleksi besar file elektronik yang tersimpan di jutaan 
komputer di seluruh dunia. Uniform Resource Locators atau URL adalah 
alamat yang digunakan untuk menemukan file. 

Informasi yang terkandung dalam URL memberi kemampuan untuk 
berpindah dari satu halaman web yang lain hanya dengan klik. Ketika 
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mengetik URL ke browser atau klik link hypertext, browser mengirim 
permintaan ke komputer remote, yang disebut server web, untuk men- 
download satu atau lebih file. Setiap URL unik, mengidentifikasi satu file 
tertentu. 

Apa yang dari khas URL? Berikut adalah beberapa contoh : 
http://belajar.kemdikbud.go.id/ 

Halaman Rumah Belajar Kementrian Pendidikan dan Kebudayaan. 
http://www.facebook.com/pustekkom 

Halaman Facebook untuk Pusat Teknologi Informasi - Kementrian 
Pendidikan dan Kebudayaan. 

ftp://rtfm.mit.edu/pub/ 

Sebuah direktori file di MIT tersedia untuk di-download. 

news : rec.gardens.roses 

Sebuah newsgroup dengan topik berkebun. 

http://blogs.reuters.com/soccer 

Sebuah blog tentang sepak bola dari kantor berita Reuters 



Bagian pertama dari URL ( sebelum dua garis miring ) memberitahu jenis 
sumber daya atau metode akses di alamat itu. Sebagai contoh: 

http : dokumen hypertext atau direktori 

ftp : file yang tersedia untuk di-download atau direktori file tersebut 
news : newsgroup 

file : file yang terletak pada drive lokal komputer Anda 
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Bagian kedua biasanya adalah alamat komputer di mana data atau layanan 
berada. Bagian tambahan mungkin menentukan nama file, port untuk 
menghubungkan ke, atau teks untuk mencari dalam database. 

Bagian-bagian dari URL 

Sebuah URL lengkap umumnya terdiri dari tiga komponen : protokol, 
nama situs, dan path absolut ke dokumen atau sumber daya, seperti yang 
ditunjukkan pada Gambar berikut. 


http:// www.example.com /2011/samples/fi rst.html 


Gambar 1.3. Sebuah contoh URL 


http:// 

Hal pertama yang dilakukan adalah URL menentukan protokol yang akan 
digunakan untuk transaksi tertentu. Aturan HTTP membiarkan server tahu 
untuk menggunakan Hypertext Transfer Protocol, atau masuk ke dalam 
"modus web" 

www.example.com 

Bagian berikutnya dari URL mengidentifikasi situs dengan nama domainnya. 
Dalam contoh ini, nama domain adalah example.com. www di bagian awal 
adalah nama host tertentu di domain tersebut. Nama host " www " telah 
menjadi sebuah kesepakatan. Tetapi, kadang-kadang nama host dapat 
dihilangkan. Bisa lebih dari satu website di domain (kadang-kadang disebut 
subdomain). Misalnya, ada : development.example.com, 

clients.example.com, dan sebagainya. 

/2012/samples/first.html 
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Ini adalah path absolut melalui direktori pada server ke dokumen HTML yang 
diminta, first.html. Kata-kata dipisahkan oleh garis miring adalah nama 
direktori, dimulai dengan direktori root dari host ( seperti yang ditunjukkan 
oleh awal /), URL pada Gambar 1.3. mengatakan ingin menggunakan 
protokol HTTP untuk terhubung ke server web di Internet disebut 
www.example.com dan meminta first.html dokumen ( terletak di direktori 
sampel yang ada di direktori 2012). 

Sebagian dari URL yang akan menggunakan start dengan http, yang 
merupakan singkatan dari Hypertext Transfer Protocol, metode yang file 
HTML yang ditransfer melalui Web. Berikut adalah beberapa hal-hal lain 
untuk mengetahui tentang URL : 

• Sebuah URL biasanya tidak memiliki spasi. 

• Penulisan URL tidak sensitif huruf besar-kecil. Jadi mengetik 

"http://www.kemdikbud.go.id" atau 

"http://WWW.KEMDIKBUD.GO.ID" atau variasi huruf besar dan 
kecil akan membawa ke halaman yang sama. 

Jika mengetik URL tidak benar, browser tidak akan dapat menemukan situs 
atau sumber daya yang inginkan. Jika mendapatkan pesan error atau 
mengakses situs yang salah, periksalah untuk melihat apakah mengeja 
alamat dengan benar. 

File standar 

Tidak setiap URL adalah terlihat begitu panjang. Banyak alamat tidak 
termasuk nama file, tapi hanya menunjuk ke sebuah direktori, seperti ini : 
http://www.w3schools.com/ 
http://w3schools.com/html/ 

Ketika server menerima permintaan untuk nama direktori bukan file tertentu, 
terlihat dalam direktori tersebut untuk dokumen default, biasanya bernama 
index.html. 

Jadi, sebenarnya secara tidak langsung, kita mengetikkan alamat lengkap 
seperti ini (sebagai contoh jika index.html sebagai default) : 
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http://www.w3schools.com/index.html 

Nama file default ( juga disebut sebagai file indeks) dapat bervariasi, dan 
tergantung pada bagaimana server dikonfigurasi. Dalam contoh ini, dinamai 
index.html, tetapi beberapa server menggunakan nama file default.htm. Jika 
situs menggunakan pemrograman server-side untuk menghasilkan halaman, 
file indeks mungkin diberi nama index.php atau index.asp. 

Hal lain yang perlu diperhatikan adalah bahwa dalam contoh pertama, URL 
asli tidak memiliki garis miring untuk menunjukkan itu adalah sebuah 
direktori. Ketika slash dihilangkan, server hanya menambahkan satu jika 
menemukan direktori dengan nama itu. 

File index ini juga berguna untuk keamanan. Beberapa server ( tergantung 
pada konfigurasi mereka) menampilkan isi direktori jika file default tidak 
ditemukan. 

Salah satu cara untuk mencegah orang melihat file-file pada direktori adalah 
memastikan ada file index di setiap direktori. Administrator server juga dapat 
menambahkan perlindungan lain untuk mencegah direktori ditampilkan di 
browser. 

Setelah file index dibuka oleh browser, maka akan disajikan seluruh informasi 
yang ada dalam dokumen HTML dari file tersebut. Sebagai contoh dapat 
dilihat pada gambar berikut: 
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« o o 

Jen’s Kitchen 



ST1. l+rfa 


C Google 

_ i 



Jens Kitchen 


If you love to read about cooking and eating, would like to find out about of 
some of the best restaurants in the world, or just want a few choice recipes to 
add to your collection, this is the site for you! 


Your pai, Jen at Jen's Kitchen 


Copyright 2011, Jennifer Robbins 


Gambar 1.4. Contoh Web 


Di bagian atas Gambar 1.4, menampilkan halaman web minimal seperti yang 
muncul dalam browser. Meskipun terlihat sebagai satu halaman yang 
koheren, sebenarnya dirakit dari empat file terpisah: dokumen HTML ( 
index.html ), sebuah style sheet ( kitchen.css ), dan dua grafis (foods.gif dan 
spoon.gif). Dokumen HTML akan menampilkan semuanya. 


c. Rangkuman 

Secara umum, pekerjaan di bidang teknologi informasi setidaknya dapat 
dikelompokan sesuai bidangnya, misalnya. 

• Kelompok pertama, adalah mereka yang bergelut di dunia perangkat 
lunak (Software), baik mereka yang merancang system operasi, database 
maupun system aplikasi. 

• Kelompok kedua, adalah mereka yang bergelut di bidang perangkat keras 
(hardware). 

• Kelompok ketiga, adalah mereka yang berkecimpung dalam operasional 
system informasi. 

Profesi-profesi yang langsung terkait dalam pengembangan aplikasi web, 
diantaranya : Web Designer, Web Programmer, Web Administrator, Web 
Master, Web Developer 
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d. Tugas 




Membuat Ringkasan Cara Kerja Web dan Layanan Hosting 

Sebelum mengerjakan tugas, buatlah kelompok terdiri atas 2-3 orang. Peserta 
Didik mengamati dan memahami cara kerja web dan layanan hosting web. 
Masing-masing kelompok membuat ringkasannya. Kemudian secara bergantian 
masing-masing kelompok mempresentasikan hasilnya didepan kelas. 

1.1. Carilah beberapa layanan hosting web di Internet. 

1.2. Cermati layanan hosting yang disediakan, cara hosting pada 
layanan tersebut. 

1.3. Bandingkan beberapa penyedia layanan hosting 

1.4. Cara Kerja Web : 

i. Bukalah website berikut ini : 
http://www.learnthenet.com/animated-internet/how- 

t h e-web-works/ 

ii. Perhatikan animasi dari “how the web works” atau 
bagaimana web bekerja. 

iii. Tulislah tahapan dari penjelasan/animasi 
bagaimana web bekerja, tersebut. Diskusikan 
dan simpulkan hasilnya 

1.5. Presentasikan hasil ringkasan di depan kelas. 


e. Tes Formatif 

1. Jelaskan apa tugas profesi dalam pengembangan aplikasi web berikut: 

a. Web Designer 

b. Web Programmer 

c. Web Administrator 

d. Web Master 
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2. Apa kepanjangan dari istilah-istilah berikut ini : 

a. WWW 

b. HTML 

c. URL 

d. W3C 

e. HTTP 
d. FTP 

f. IP 



3. Sebutkan versi HTML dari versi awal hingga sekarang ! 

4. Sebutkan berbagai jenis browser! 


f. Lembar Jawaban Tes Formatif 
LJ- 01 : Tugas profesi dalam pengembangan aplikasi web 


LJ- 02 : Kepanjangan dari istilah-istilah 
















PEMROGRAMAN WEB SEMESTER 1 



LJ- 03 : Versi HTML dari versi awal hingga sekarang 


LJ- 04 : Jenis-jenis browser 





















g. Lembar Kerja Peserta Didik 
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2. Kegiatan Belajar 2: Alur dan Perangkat Pengembangan Aplikasi 
Web 


a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 2 ini Peserta Didik diharapkan dapat: 

1) Memahami Alur Pengembangan Aplikasi Web 

2) Menyajikan Perangkat Pengembangan Aplikasi Web 

b. Uraian Materi 

• Alur Pengembangan Aplikasi Web 

Berdasarkan persepsi dari beberapa pengembang perangkat lunak dan ahli-ahli 
dalam bidang rekayasa perangkat lunak (Software engineering professional), 
Pengembangan Aplikasi Web tidaklah sama dengan rekayasa perangkat lunak 
walaupun keduanya melibatkan pemrograman dan pengembangan perangkat 
lunak. 

Walaupun banyak mengadopsi prinsip-prinsip rekayasa perangkat lunak, 
Pengembangan Aplikasi Web memiliki banyak pendekatan, metoda, alat bantu, 
teknik dan panduan yang memenuhi persyaratan pembuatan sistem berbasis 
web. 

Pengembangan sistem berbasis web berbeda dengan pengembangan perangkat 
lunak konvensional, dimana pengembangan sistem berbasis web lebih banyak 
menghadapi tantangan. Pengembangan Aplikasi Web adalah gabungan dari print 
publishing dan pengambangan perangkat lunak, diantara marketing dan 
perhitungan dan diantara seni dan teknologi. 

Alternatif model dari Pengembangan Aplikasi Web adalah sebagai berikut: 

Formulasi (formulation) 

Kegiatan yang berfungsi untuk merumuskan tujuan dan ukuran dari aplikasi 
berbasis web serta menentukan batasannya sistem. 

Tujuan yang ingin dicapai bisa dibedakan menjadi dua kategori, yaitu : 
1. Tujuan yang bersifat informatif 
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Menyediakan suatu informasi tertentu kepada pengguna, berupa teks, grafik, 
audio, dan video. 

2. Tujuan yang bersifat fungsional 

Kemampuan untuk melakukan suatu fungsi yang dibutuhkan pengguna, misal 
dengan menggunakan aplikasi tersebut seorang guru dapat memperoleh nilai 
akhir dan statistik nilai guru dari data-data ujian, tugas, kuis yang ia input ke 
dalam aplikasi. 

Perencanaan (planning) 

Kegiatan yang digunakan untuk menghitung estimasi biaya proyek pembuatan 
aplikasi berbasis web ini, estimasi jumlah pengembang, estimasi waktu 
pengembangan, evaluasi resiko pengembangan proyek, dan mendefinisikan 
jadwal pengembangan untuk versi selanjutnya (jika diperlukan). 

Analisis (analysis) 

Kegiatan untuk menentukan persyaratan-persyaratan teknik dan mengidentifikasi 
informasi yang akan ditampilkan pada aplikasi berbasis web. Analisis yang 
digunakan pada rekayasa web dilakukan dari empat sisi, yaitu : 

1. Analisis isi informasi 

Mengidentifikasi isi yang akan ditampilkan pada aplikasi berbasis web ini. Isi 
informasi dapat berupa teks, grafik, audio, maupun video. 

2. Analisis interaksi 

Analisis yang menunjukkan hubungan antara web dengan pengguna. 

3. Analisis fungsional 

Analisis tentang proses bagaimana aplikasi berbasis web ini akan menampilkan 
informasi kepada pengguna. 
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4. Analisis konfigurasi 

Konfigurasi yang digunakan pada aplikasi berbasis web, internet, intranet, atau 
extranet. Selain itu, analisis ini juga meliputi relasi database dengan web jika 
diperlukan. 

Rekayasa (engineering) 

Terdapat dua pekerjaan yang dilakukan secara paralel, yaitu desain isi informasi 
dan desain arsitektur web. 

Pada saat tahap desain, ada beberapa hal yang perlu dilakukan : 

• Pembuatan Diagram Wireframe (Gambar Rangka), tujuan dari diagram 
gambar rangka adalah untuk menunjukkan bagaimana lay out halaman 
web dan menunjukkan di mana fungsi dan konten seperti navigasi, kotak 
pencarian, elemen bentuk dan sebagainya, tanpa desain grafis. Berikut ini 
contohnya : 
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LOGO 


Lap m or Crsate Account 


contact | store locator | support | CART 


SEARCH 


All categories 

Categoryl 

Category2 

Category3 

Category4 

CategoryS 

[ PROMOTIONALIMAGES ROTATE HERE ] 

Category6 

12 3 4 


Today's Specials 


Product 1 


Product 2 Products Prodiia 4 Product 5 Product 6 


ABOUTUS 

Company 

News 

Jobs 

Policies 

Contact 


SOCIAL 

Facebook 
Twitter 
Try our app 


SERVICE 

FAQ 

Live support 
Site map 


Copyright statement 


Gambar. 2.1 Diagram Wireframe sebuah halaman web. 

• Diagram Situs, Sebuah diagram situs menunjukkan struktur situs secara 
keseluruhan dan bagaimana halaman individual berhubungan satu sama 
lain. Gambar 2.2 menunjukkan diagram situs yang sangat sederhana 
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Gambar 2.2. Diagram Situs 

• Storyboard dan diagram alir pengguna, Storyboard ini bertujuan untuk 
menunjukkan langkah-langkah yang diperlukan untuk menyelesaikan 
tugas-tugas, opsi yang mungkin, dan juga memperkenalkan beberapa 
standar jenis halaman. Gambar 1-3 menunjukkan storyboard sederhana 
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Gambar. 2.3 Desain Visual (Sumber: www.idwebhost.com,www.idebagus.com) 


Implementasi (page generation) & pengujian ( testing) 


Suatu kegiatan pengembangan untuk mewujudkan desain menjadi suatu web 
site. Teknologi yang digunakan tergantung dengan kebutuhan yang telah 
dirumuskan pada tahap analisis. 

Dalam tahap pengembangan ini, meliputi kegiatan: 


• Authoring, adalah istilah yang digunakan untuk proses 
mempersiapkan konten untuk nantinya diunggah di Web, atau lebih 
khusus, menandai konten dengan tag HTML yang menggambarkan 
isi dan fungsinya. 

• Styling, dalam development web, penampilan halaman dalam 
browser dikendalikan oleh aturan style yang ditulis dalam CSS ( 
Cascading Style Sheets ) 

• Scripting dan pemrograman, ada bahasa pemrograman web 
terkait diantaranya PHP, Ruby, Python, dan ASP.NET, yang 
berjalan pada server dan mengolah data dan informasi sebelum 
dikirim ke browser pengguna. 


31 | P a g e 



























Pengujian dilakukan setelah implementasi selesai dilaksanakan. Pengujian 
meliputi beberapa parameter yang akan menentukan standar aplikasi berbasis 
web yang telah dibuat. Tahap pengujian adalah suatu proses untuk menguji 
aplikasi berbasis web yang telah selesai dibuat. Hal ini bertujuan untuk 
menemukan kesalahan dan kemudian memperbaikinya. Pengembang suatu 
aplikasi berbasis web mendapat tantangan besar untuk melakukan pengujian 
karena karakter aplikasi ini yang beroperasi pada jaringan dengan berbagai 
macam pengguna, berbagai macam sistem operasi, perangkat keras, browser, 
protokol komunikasi, dll. 

Ada beberapa pendekatan yang digunakan untuk melakukan pengujian, yaitu : 

1. Pengujian fungsional dan operasional (fungsional and operational testing) 

Bertujuan untuk menguji masukan dan keluaran dari aplikasi ini. 

Hasil keluaran aplikasi bergantung dari teknologi yang digunakan, baik itu 
bahasa pemrograman maupun bahasa skrip yang digunakan. 

Untuk menguji code HTML dan CSS yang digunakan dapat menggunakan alat 
bantu W3C HTML Validation Service di http://validator.w3.org/ dan W3C CSS 
Validation Service di http://jigsaw.w3.org/css-validator/ 

2. Pengujian navigasi (navigation testing) 

Hal ini digunakan untuk melihat kesesuaian antara desain navigasi dengan 
navigasi yang ada di aplikasi. Navigasi berhubungan dengan link-link yang 
terdapat didalam aplikasi. 

Untuk menguji link dapat digunakan alat bantu W3C Link Checker Service di 
http://validator.w3.org/checklink 

3. Pengujian konfigurasi (configuration testing) 

Pengujian ini dilakukan pada sistem operasi, browser, sistem perangkat keras 
dan perangkat lunak pendukung. Pengujian ini dilakukan untuk menentukan 
batas toleransi kebutuhan aplikasi akan perangkat lunak dan perangkat keras 
pendukungnya. 
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4. Pengujian keamanan dan performansi (security and performance testing) 
Pengujian ini dilakukan untuk melihat tingkat keamanan aplikasi dengan cara 
menguji aspek-aspek yang dapat menimbulkan gangguan keamanan aplikasi 
maupun server. Keamanan aplikasi sangat bergantung pada teknologi 
pengembangan website, konfigurasi server yang digunakan dan kelakuan sistem. 
Pengujian performansi dapat dilakukan bersamaan dengan pengujian keamanan 
aplikasi, karena keamanan aplikasi berbasis web juga tergantung dari 
performansi server dan aplikasi tersebut. 

Evaluasi oleh konsumen (customer evaluation) 

Suatu kegiatan akhir dari siklus proses rekayasa web, akan menentukan apakah 
web yang telah selesai dibuat tersebut sesuai dengan yang mereka inginkan. 
Apabila aplikasi berbasis web ini belum sesuai dengan kehendak mereka, maka 
proses rekayasa web akan terus dilakukan dan dimulai lagi dari tahap formulasi 
untuk versi berikutnya. 

Perangkat pengembangan aplikasi web 

Untuk perangkat pengembangan aplikasi web dapat dikelompokan menjadi 
perangkat keras dan perangkat lunak. 

Perangkat Keras 

Untuk lingkungan pengembangan web yang nyaman, berikut ini peralatan yang 
sebaiknya disediakan: 

• Komputer Utama, dengan operating system Macintosh, Windows, 
ataupun Linux. Perusahaan pengembangan web profesional cenderung 
berbasis Macintosh. 

• Memori tambahan, sebaiknya Computer memiliki memori yang besar, 
karena dalam pengembangan web cenderung kita akan membuka 
beberapa aplikasi sekaligus. 

• Sebuah monitor besar. Meskipun bukan keharusan, monitor besar 
memudahkan untuk desainer visual. Semakin besar monitor, semakin 
banyak jendela dan panel kontrol dapat terbuka pada waktu yang sama. 
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• Sebuah scanner dan / atau kamera digital. Jika mengantisipasi 
membuat gambar dan tekstur sendiri, akan memerlukan beberapa alat 
untuk membuat gambar. 

• Sebuah komputer kedua. Banyak web designer merasa berguna 
memiliki komputer penguji yang menjalankan platform yang berbeda dari 
komputer utama yang mereka gunakan untuk pengembangan. Karena 
browser kerja yang berbeda pada Mac dan pada mesin Windows, itu 
penting untuk menguji halaman web dalam sebanyak mungkin system 
operasi berbeda. 

• Perangkat mobile/smartphone. Saat ini banyak orang mengakses web 
melalui smartphone/tablet, sehingga kita perlu menguji penampilan dan 
kinerja situs web yang kita buat pada mobile browser pada smartphone 
atau perangkat tablet. Namun saat ini banyak web emulator yang dapat 
digunakan sebagai penguji web kita 

Perangkat Lunak 

Untuk perangkat lunak pengembangan web dapat dikelompokkan menjadi 
beberapa, diantaranya : 

Web page authoring 

Ini adalah kelompok perangkat lunak seperti desktop publishing tetapi format 
yang dihasilkan adalah halaman web. Aplikasi ini biasanya bersifat “WYSIWYG” 
(What You See Is What You Get, dibaca “whizzy-wig”) yaitu apa yang kamu lihat, 
itulah yang kamu dapatkan. Jadi aplikasi ini biasanya ketika membuat 
tampilannya seperti yang akan dihasilkan. 

Beberapa contoh aplikasi yang termasuk dalam kelompok ini : 

• Adobe Dreamweaver, aplikasi ini berbayar dan dibawah lisensi 

perusahaan Adobe, aplikasi ini banyak digunakan oleh pengembang web. 
Memiliki banyak fasilitas dan fiture. 

• Microsoft Expression Web (lisensi dari Windows). Bagian dari Microsoft’s 
suite yang merupakan aplikasi perancangan professional. 

• Nvu (Linux, Windows, dan Mac OS X). Tidak ingin membayar untuk Editor 
WYSIWYG? Nvu (diucapkan N-view, untuk "pandangan baru") adalah 


34 | P a g e 




sebuah aplikasi open source (sumber terbuka) yang cocok dengan 
banyak fitur dalam Adobe Dreamweaver, dan dapat diunduh secara gratis 
di nvu.com. 


n • O » A* APP DCVU.OPIR * IP | O csu™ tr-.jro 

fik Edrt Vi ew lnM«t Mod^y Formrt Ce*rrr«rtdj 5*t* Wmdc•* Hdp 



Gambar.2.4Tampilan aplikasi Adobe Dreamweaver CS6 (sumber : 
http://imagenes.es.sftcdn.net) 
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Gambar 2.5. Tampilan aplikasi Microsoft Expression Web (sumber: http://i1- 

win.softpedia-static.com) 
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Gambar. 2.6 Tampilan aplikasi Nvu (sumber: http://net2.com/nvu/screenshots.html) 
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Editor 

Ini adalah kelompok perangkat lunak yang kebalikan dari Adobe Dreamweaver 
Microsoft Expression Web. Aplikasi ini tidak lagi “WYSIWYG” (What You See Is 
What You Get”) tetapi lebih ke kode HTML. Beberapa contoh aplikasi yang 
termasuk dalam kelompok ini: 

• TextPad (Windows saja). TextPad adalah plain-text sederhana dan 
murah untuk editor kode di Windows. 

• Teks Sublime (Window, Mac, Linux). Editor teks ini terlihat dipreteli 
namun memiliki banyak fungsi (seperti kode warna dan ikhtisar kode 
penuh) bagi pengembang web. 

• Coda oleh Panic (hanya Macintosh). Pengguna Coda seperti alur kerja 
yang visual, alat-alat manajemen file, dan built-in akses terminal. 

• Textmate oleh MacroMates (hanya Macintosh). Editor teks canggih ini 
memiliki alat manajemen proyek dan antarmuka yang terintegrasi dengan 
sistem operasi Mac. Hal ini semakin populer karena disesuaikan, kaya 
fitur, dan murah. 

• BBEdit oleh Bare Bones Software (hanya Macintosh). Untuk 
pengembang web banyak fitur shortcut yang besar telah membuat editor 
terkemuka berbasis Mac 

Aplikasi editing gambar dan menggambar 

Untuk menambahkan gambar ke halaman web, akan perlu program editing 
gambar. Berikut ini beberapa aplikasi yang cukup populer: 

• Adobe Photoshop. Photoshop dapat dikatakan sebagai standar industri 
untuk penciptaan gambar baik dalam cetak maupun dunia web. 

• Adobe Photoshop Elements. Versi ini lebih ringan dari Photoshop 
dirancang untuk mengedit foto dan manajemen, tetapi beberapa 
penggemar menemukan bahwa ia memiliki semua alat yang diperlukan 
untuk menempatkan gambar pada halaman web. 

• Adobe lllustrator. Karena desainer perlu membuat logo, ikon, dan 
ilustrasi di berbagai ukuran dan resolusi, untuk itu semua aplikasi ini 
sangat membantu. Aplikasi ini juga dapat dipadukan dengan Photoshop 
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• Adobe Fireworks. Program grafis web ini menggabungkan editor foto 
dengan alat untuk membuat ilustrasi berbasis vektor, la juga memiliki alat- 
alat canggih untuk grafis web. 

• Corel Paint Shop Photo Pro (Windows saja). Editor gambar yang 
penuh fitur ini populer di pengguna Windows, terutama karena harga 
yang rendah. 

Aplikasi Internet 

Karena hasil akhir dari pengembangan halaman web digunakan di Internet, maka 
diperlukan beberapa aplikasi untuk membuka halaman web, biasa disebut 
“browser”. Berikut ini beberapa aplikasi browser yang cukup populer: 

• Windows: 

o Internet Explorer 
o Chrome 
o Firefox 
o Safari 
o Opera 

• Macintosh OS X: 

o Safari 
o Chrome 
o Firefox 
o Opera 

• Browser perangkat bergerak (mobile) 

o Mobile Safari (iOS) 
o Android Browser (Android) 
o BlackBerry Browser (RIM) 
o Nokia Series 40 dan Nokia Browser for Symbian 
o Opera Mobile dan Mini (installed on any device) 
o Internet Explorer Mobile (Windows Phone) 
o Silk (Kindle Fire) 

Aplikasi transfer file (FTP/File Transfer Protokol). 
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Sebuah aplikasi FTP memungkinkan untuk mengunggah dan mengunduh file 
antara komputer kita dan komputer yang akan menjadi tempat halaman web/web 
server. Beberapa aplikasi authoring web sebelumnya juga memiliki aplikasi FTP 
yang terintegrasi langsung. Ada juga aplikasi FTP khusus, seperti yang 
tercantum di bawah ini: 

• Windows 

• WSFTP 

• CuteFTP 

• AceFTP 

• Filezilla 

• Macintosh 

• Transmit 

• Cyberduck 

• Fetch 

c. Rangkuman 

Alternatif model dari Pengembangan Aplikasi Web adalah sebagai berikut : 
Formulasi, Perencanaan (planning), Analisis (analysis), Rekayasa 
(engineering), Implementasi ( page generation) & pengujian (testing), 
Evaluasi oleh konsumen (customer evaluation). 

Untuk perangkat pengembangan aplikasi web dapat dikelompokan menjadi 
perangkat keras dan perangkat lunak. Perangkat lunak terdiri dari Web page 
authoring, HTML Editor, Aplikasi editing gambar dan menggambar, Aplikasi 
Internet, dan Aplikasi transfer file. 

d. Tugas 

Membuat Ringkasan Tampilan Web pada Aplikasi Browser 

Sebelum mengerjakan tugas, buatlah kelompok terdiri atas 2-3 orang. 
Peserta Didik mengamati dan memahami berbagai aplikasi web browser. 
Masing-masing kelompok membuat ringkasannya. Kemudian secara 
bergantian masing-masing kelompok mempresentasikan hasilnya didepan 
kelas. 

1.1. Carilah beberapa aplikasi browser di Internet dan installah. 



39 | P a g e 





PEMROGRAMAN WEB SEMESTER 1 



1.2. Bukalah beberapa web tentang pariwisata, instansi pemerintah 
atau lainnya dengan beberapa aplikasi browser. 

1.3. Bandingkan tampilan website dari berbagai aplikasi browser 

1.4. Presentasikan hasil ringkasan di depan kelas. 


e. Tes Formatif 

1. Pada saat tahap desain, ada kegiatan Pembuatan Diagram Wireframe dan 

Diagram Situs, jelaskan kegiatan tersebut! 

2. Dalam tahap pengembangan, ada kegiatan Authoring, Styling, dan Scripting & 

Pemrograman, jelaskan kegiatan tersebut! 

3.Sebutkan Perangkat keras yang diperlukan dalam pengembangan web! 
4.Sebutkan contoh aplikasi yang termasuk dalam kelompok Web page Authoring! 
5.Sebutkan contoh aplikasi yang termasuk dalam kelompok HTML Editor! 
6.Sebutkan contoh aplikasi yang termasuk dalam kelompok Editing gambar! 

f. Lembar Jawaban Tes Formatif 

LJ- 01 : Kegiatan Pembuatan Diagram Wireframe dan Diagram Situs 


LJ- 02 : Kegiatan Authoring, Styling, dan Scripting & Pemrograman 















Pemrograman Web Semester 1 



LJ- 03 : Perangkat keras yang diperlukan dalam pengembangan web 


LJ- 04 : contoh aplikasi yang termasuk dalam kelompok Web page Authoring 


LJ- 05 : contoh aplikasi yang termasuk dalam kelompok HTML Editor 






























LJ- 06 : contoh aplikasi yang termasuk dalam kelompok Editing gambar! 
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3. Kegiatan Belajar 3 : Menyajikan format teks dalam dokumen web 

a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 3 ini Peserta Didik diharapkan dapat: 

1) Memahami Dasar-dasar HTML 

2) Memahami Properti Dokumen Web 

3) Menyajikan teks dalam format tertentu pada halaman dokumen web 

b. Uraian Materi 

1. Anatomi dokumen Web 

Dasar-Dasar HTML 

HTTP (Hypertext transfer protocol) merupakan protokol yang digunakan untuk 
mentransfer data antara web server ke web browser. Protocol ini mentransfer 
dokumen-dokumen web yang ditulis atau berformat HTML (Hypertext Markup 
Language). Dikatakan markup language karena HTML berfungsi untuk 
‘memperindah’ file teks biasa untuk ditampilkan pada program web browser hal 
ini dilakukan dengan menambahkan elemen atu sering disebut sebagai tag-tag 
pada file teks biasa tersebut. 

Saat ini sudah dikenal HTML5 yang menawarkan berbagai fitur menarik yang 
tidak didukung oleh HTML sebelumnya. Beberapa fitur yang tersedia pada 
HTML5 antara lain sebagai berikut. 

o Canvas. Memungkinkan pembuatan gambar dalam kanvas. 
Jadi, gambar tidak lagi diambil dari gambar utuh, melainkan 
bisa disusun sendiri, bak menggunakan program Paint. 
o Header. Berguna untuk menyatakan suatu judul, yang bisa 
diisi dengan elemen logo dan nama perusahaan. 
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o Footer. Merupakan kebalikan dari header. Sebagai catatan 
kaki, elemen ini berguna untuk menaruh informasi di bagian 
bawah halaman web. 

o Time. Elemen ini berguna untuk menyajikan informasi 
tentang waktu. 

o Audio. Memungkinkan penyajian player untuk memutar 
suara. 

o Video. Memungkinkan player untuk memainkan film. 


Secara prinsip, fitur pada HTML dapat dikelompokkan ke dalam : 
o Struktur halaman ; 
o Presentasi visual ; 
o Peranti penyaji gambar; 
o Pendukung media ; dan 
Peningkatan koneksi dengan JavaScript. 

Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai 
dengan symbol lebih besar (<) dan (>). Pasangan dari sebuah tag 
ditandai dengan symbol garis miring (/). Misalnya pasangan dari tag 
ccontoh > adalah</contoh>. Dalam hal ini <contoh> kita sebut 
sebagai elemen dan biasanya daiam suatu elemen terdapat atribut- 
atribut untuk mengatur elemen itu. Jadi misalnya elemen <contoh> 
bila ditulis dengan atributnya adalah sebagai berikut: 

<contoh atributl =”nilai atributl”atribut2=”nilai atribut2=”...>. 

Dalam penulisan tag HTML tidaklah case sensitive artinya 
pengguna huruf kecil ataupun Capital tidaklah menjadi masalah. 

Struktur Dasar Dokumen HTML 
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Setiap dokumen HTML memiliki struktur dasar atau susunan file 
sebagai berikut: 


<html> 

<head> 

<title>Judul Halaman</title> 
</head> 

<body> 

Berisi tentang text, gambar, 
atau apapun yang 
tampil pada dokumen web. 
</body> 

</html> 



Seperti terlihat, struktur file HTML diawali dengan sebuah tag<html> 
dan ditutup dengan tag </html>. Di dalam tag ini terdapat dua buah 
bagian besar, yaitu yang diapit oleh tag<head>...</head> dan tag 
<body>...</body>. 

Bagian yang diapit oleh tag HEAD merupakan header dari 
halaman HTML dan tidak ditampilkan pada browser. Bagian ini 
berisi tag-tag header seperti <tittle>... </tittle> yang berpungsi 
untuk mengeluarkan judul pada tittle bar window web browser. 

Bagian kedua, yang diapit ole tag BODY merupakan bagian yang 
akan ditampilkan pada halaman web browser nantinya. Pada 
bagian ini anada akan menuliskan semua jenis informasi berupa 
teks dengan bermacam format maupun gambar yang ingin 
sampaikan pada pengguna nantinya. 
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Pengaturan Properti Dokumen 

Properti document diatur melalui atribut-atribut yang terdapat dalam 
elemen <body>. Sebagai contoh adalah pengaturan warna latar 
belakng halaman, wana teks, warna link dan lain-lain. 

Kode Warna 

Dalam pengaturan warna menggunakan kode RGB yang mana 
ditampilkan dalam nilai heksadesimal. Setiap bagian dua gigit kode 
menunjukkan banyaknya intensitas dari kombinasi warna merah, 
hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti 
tidak ada warna merah dalam kobinasi warna berikut ini adalah 
contoh kode warna : 


Color 

hexadecimai 

Color 

Flexadecimal 

White 

#FFFFFF 

Black 

#000000 

Red 

#FF0000 

Green 

#00FF00 

Blue 

#0000FF 

Magenta 

#FF00FF 

Cyan 

#00FFFF 

Yellow 

#FFFF00 

Aquamarine 

#70DB93 

Chocolate 

#5C3317 

Violet 

#9F5F9F 

Brass 

#B5A642 

Coper 

#B87333 

Pink 

#FF6EC7 


Atribut Elemen <body> 

BACKGROUND = Lokasi dan nama file (latar belakng dokumen 
image dokumrn) 

BGCOLOR = Warna (warna latar belakng dokumen, 

default putih) 

TEXT = Warna (warna teks dokumen, default hitam) 
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LINK = Warna (warna link dokumen, default biru) 

VLINK = Warna (warna visited link dokumen, default ungu) 
ALINK = Warna (warna aktif link dokumen, default merah) 


Elemen Heading <h1>... <h6> 

Tag heading berfungsi untuk memformat heading (judul dan sub¬ 
judul) dari suatu halam web. Heading ini akan memperbesar ukuran 
huruf unruk setiap jenis heading. Ad 7 buah heading yang dikenal di 
HTML, yaitu dari <h1> sampai <h6>. 

Elemen yang dihilangkan di HTML5 

■ Berikut ini elemen HTML 4.01 yang dihilangkan di HTML5: 

■ <acronym> 

■ <applet> 

■ <basefont> 

■ <big> 

■ <center> 

■ <dir> 

■ <font> 

■ <frame> 

■ <frameset> 

■ <noframes> 

■ <strike> 

■ <tt> 

Dokumen HTML5 

Sebuah dokumen HTML5 seperti berikut ini, cukup ditulis dengan Text Editor 
ataupun HTML Editor: 


<! DOCTYPE HTML> 









<html> 

<head> 

<title>Tes HTML5</title> 
</head> 

<body> 

Selamat belajar HTML5 
</body> 

</html> 


Berikut ini penjelasan dari dokumen HTML5 di atas : 

o Sebuah dokumen HTML5 diawali dengan dDOCTYPE HTML>. 

o Tanda seperti <html> disebut tag. Sebuah tag seperti itu menyatakan 
sebuah elemen dalam dokumen html. 

o Beberapa tag berpasangan. Sebagai contoh, <head> berpasangan 
dengan </head>. 

o Namun, tidak semua tag berpasangan. Sebagai contoh, <br> tidak punya 
pasangan. Khusus untuk tag seperti ini, tidak ada keharusan untuk 
menyertakan tanda / sebelum >. Pada XHTML, tanda seperti / memang 
diharuskan untuk ditulis. 

o Pasangan <html>..</html> menyatakan awal dokumen HTML. 

o Di dalam <html>..</html> terdapat pasangan <head>..</head> dan 
<body>..</body>. 

o Pasangan <head>..</head> menyatakan bagian judul dokumen HTML. 
Isinya paling tidak berupa pasangan <tittle>..</tittle>. 

o Pasangan <body>..</body> menyatakan bagian tubuh dokumen. Pada 
contoh, 

Selamat belajar HTML5 

muncul pada badan dokumen. Apabila dibuka di web browser tampilannya 
sebagai berikut: 
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Gambar 3.1 Tampilan Dokumen HTML di Web Browser 

Gambar 3.2 berikut ini memperlihatkan penjelasan secara visual 
terhadap dokumen HTML di depan. 
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Gambar 3.2 Penjelasan dokumen HTML 

c. Rangkuman 

■ Dokumen-dokumen web ditulis dalam format HTML (Hypertext Markup 
Language). Dikatakan markup language karena HTML berfungsi untuk 
‘memperindah’ file teks biasa untuk ditampilkan pada program web 
browser hal ini dilakukan dengan menambahkan elemen atu sering 
disebut sebagai tag-tag pada file teks biasa tersebut 

■ Struktur file HTML diawali dengan sebuah tag<html> dan ditutup 
dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar, 
yaitu yang diapit oleh tag<head>...</head> dan tag <body>...</body> 

d. Tugas 

Untuk membuat dokumen HTML dengan Text Editor paling tidak ada 4 tahap : 

• Buka Text Editor/HTML Editor 

• Ketikkan dokumen HTML 

• Simpan dengan format *.html 

• Buka hasilnya/dokumen html dengan web browser 
Buatlah beberapa dokumen HTML berikut ini. : 

i. HTML Heading 
<!DOCTYPE html> 

<html> 

<head> 

<title>Heading</title> 

</head> 

<body> 

<hl>This is heading l</hl> 

<h2>This is heading 2</h2> 

<h3>This is heading 3</h3> 

<h4>This is heading 4</h4> 
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<h5>This is heading 5</h5> 

<h6>This is heading 6</h6> 

</body> 

</html> 

Bagaimana tampilannya? Apa yang dapat kamu simpulkan tentang elemen 
Heading? 

ii. HTML Paragraph 

<!DOCTYPE html> 

<html> 

<head> 

<tittle>Paragraf</tittle> 

</head> 

<body> 

<p> Ini adalah paragraf. Ini adalah paragraf. Ini 
adalah paragraf. Ini adalah paragraf. Ini adalah 
paragraf. Ini adalah paragraf. </p> 

<p> Ini paragraph lainnya. Ini paragraph lainnya. 

Ini paragraph lainnya. Ini paragraph lainnya. Ini 
paragraph lainnya. </p> 

</body> 

</html> 

Bagaimana tampilannya? Apa yang dapat kamu simpulkan tentang elemen 
Paragraph? 

iii. HTML Link 

<!DOCTYPE html> 

<html> 
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<head> 

<tittle>Link</tittle> 

</head> 


<body> 


<a href="http://www.w3schools.com"> 

Ini adalah 

link</a> 

</body> 


</html> 



Bagaimana tampilannya? Apa yang dapat kamu simpulkan tentang elemen 
Paragraph? 
iv. HTML Image 

<!DOCTYPE html> 

<html> 

<head> 

<tittle>Gambar/Image</tittle> 

</head> 

<body> 

<img src="w3schools.jpg" alt="W3Schools.com" 
width="104" height="142"> 

</body> 

</html> 

Bagaimana tampilannya? Apa yang dapat kamu simpulkan tentang 
elemen Image? 

e. Tes Formatif 

1. HTML kepanjangan dari 
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a) Hyperlinks and Text Markup Language 

b) HyperText Markup Language 

c) Home Tool Markup Language 

d) Homepage Text Markup Language 

2. Siapakah yang membuat standar Web? 

a) Google 

b) Microsoft 

c) Mozilla 

d) The World Wide Web Consortium 

3. Pilih tag HTML yang benar untuk ukuran huruf heading terbesar 

a) <head> 

b) <h6> 

c) <heading> 

d) <h1> 

4. Pilih tag HTML yang benar untuk membuat huruf italic 

a) <italic> 

b) <i> 

5. Apa Tag HTML yang benar untuk membuat hyperlink? 

a) <a name="http://www.w3schools.com">W3Schools.com</a> 

b) <a>http://www.w3schools.com</a> 

c) <a href="http://www.w3schools.com">W3Schools</a> 

d) <a url="http://www.w3schools.com">W3Schools.com</a> 

6. Sebutkan 4 tag minimal dalam sebuah dokumen HTML! 


f. Lembar Jawaban Tes Formatif 

1. 

2 . 

3 . 

4 . 
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5 . 

6 . 

g. Lembar Kerja Peserta Didik 
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4. Kegiatan Belajar 4 : Menyajikan pemformatan Teks dan Paragraf 
Web 


a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 4 ini Peserta Didik diharapkan dapat: 

1) Memahami Pemformatan Teks 

2) Memahami Pemformatan Paragrap Web 

3) Menyajikan pemformatan paragraph pada halaman dokumen web 

b. Uraian Materi 

1. Pemformatan Teks 

Berikut ini adalah contoh yang dihasilkan pemformatan teks pada dokumen 
web : 

Teks ini berformat tebal atau bold 
Teks ini berformat strong 

Teks ini berformat miring atau italic 
Teks ini berformat emphasized 

Teks ini berformat keluaran komputer 

Teks ini berformat dibawah garis atau . . . dan di atas garis atau superscnpt 

° snncrnnt u 


HTML menggunakan tag seperti <b> dan <i> untuk memformat output, 
seperti teks tebal atau miring. 

Tag HTML ini disebut tag format, selengkapnya dalam tabel berikut: 

Tag HTML Pemformatan Teks 


Tag 

Deskripsi 

<b> 

Mendefinisikan teks tebal 

<em> 

Mendefinisikan teks menekankan 

<i> 

Mendefinisikan teks miring 

<small> 

Mendefinisikan teks kecil 

<strong> 

Mendefinisikan teks penting 
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<sub> 

Mendefinisikan teks di bawah garis 

<sup> 

Mendefinisikan teks di atas garis 

<ins> 

Mendefinisikan teks sisipan 

<del> 

Mendefinisikan teks dicoret 

<mark> 

Mendefinisikan teks ditandai 


Tag HTML “keluaran Computer” 


Tag 

Deskripsi 

<code> 

Mendefinisikan teks kode komputer 

<kbd> 

Mendefinisikan teks keyboard 

<samp> 

Mendefinisikan teks contoh kode 

<var> 

Mendefinisikan teks variabel 

<pre> 

Mendefinisikan teks terformat 

HTML Citations, Ouotations, and Definition Tags 

Tag 

Deskripsi 

<abbr> 

Mendefinisikan sebuah singkatan 

<address> 

Mendefinisikan alamat atau kontak informasi 

<bdo> 

Mendefinisikan arah teks 

<blockquote> 

Mendefinisikan sebuah bagian yang dikutip dari sumber 

lain 

<q> 

Mendefinisikan sebuah kutipan pendek 

<cite> 

Mendefinisikan judul karya 

<dfn> 

Mendefinisikan sebuah istilah definisi 


2. Pemformatan Paragrap 

Tag HTML untuk paragrap adalah <p>, dengan tag penutup </p>. Berikut ini 
contohnya : 

<p>ini adalah paragrap</p> 
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<p>Ini paragrap yang lain</p> 


c. Rangkuman 

Pemformatan teks digunakan untuk memformat teks, seperti huruf tebal, 
miring dsb. 

Perfomatan teks ini juga digunakan untuk menampilkan “keluaran Computer”, 
HTML Citations, Ouotations, and Definition 

d. Tugas 

Buatlah dokumen-dokumen HTML berikut ini, diskusikan hasilnya dengan 
teman-temanmu. 

1 .Format Teks 

<html> 

<head> 

<title>Format Teks</title> 

</head> 

<body> 

<P> 

<b>Tulisan ini ditebalkan (bold)</b> 

</p> 

<P> 

<strong>Tulisan ini ditebalkan 
(strong)</strong> 

</p> 

<P> 
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<em>Tulisan ini miring 

(emphasize) 

</em> 


</p> 


<P> 


<big>Tulisan ini besar 

(big)</big> 

</p> 


<P> 


<i>Tulisan ini miring 

italic) </i> 

</p> 


<p>Tulisan ini 


<sub>subscript</sub> 


</p> 


<p>Tulisan ini 


<sup>superscript</sup> 


</p> 


</body> 


</html> 



2.Pre Format 

<HTML> 

<HEAD> 

<TITLE>Preformat </TITLE> 
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</HEAD> 

<BODY> 

<H2>Daftar Harga Keladi:</H2> 


<PRE> 

Red Flash. 35.000 

Red Fire. 60.000 

Fannie Munson. 60.000 

</PRE> 


Harga sewaktu-waktu bisa berubah. 
</BODY> 

</HTML> 


3. Pre Format 

<html> 

<head> 

<title>Tag Preformatted</title> 

</head> 

<body> 

<pre> 

This section provides a brief overview of the menus in 
Dreamweaver. 

The File menu and Edit menu contain the Standard menu 


59 | P a g e 














items for File and Edit. 

menus, such as New, Open, Save, Save All, Cut, Copy, 
Paste, 

Undo,and Redo 
</pre> 

<pre> 

Ini adalah 
preformatted text. 

Menampilkan spasi 

Dan line break apa adanya. 

</pre> 

<p>Tag PRE cocok digunakan untuk menampilkan kode bahasa 
pemrograman komputer :</p> 

<pre> 

for i = 1 to 10 
print i 
next i 
</pre> 

</body> 

</html> 
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5 .Ouotation 

<html> 

<head> 

<title>quotation</title> 

</head> 

<body> 

tulisan ini BUKAN quotation 
<blockquote> 

tulisan ini adalah quotation <br> 
tulisan ini adalah quotation <br> 
tulisan ini adalah quotation <br> 
</blockquote> 

</body> 

</html> 


e. Tes Formatif 

1. Isikan tag-tag untuk deskripsi berikut ini ! 


Tag Deskripsi 


Mendefinisikan teks tebal 
Mendefinisikan teks menekankan 
Mendefinisikan teks miring 
Mendefinisikan teks kecil 
Mendefinisikan teks penting 
Mendefinisikan teks di bawah garis 
Mendefinisikan teks di atas garis 
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Mendefinisikan teks sisipan 
Mendefinisikan teks dicoret 
Mendefinisikan teks ditandai 


2. Apa fungsi tag-tag berikut ini ! 

a. <p> </p> 

b. <code> 

c. <pre> 

f. Lembar Jawaban Tes Formatif 

LJ- 01 : Tag untuk deskripsi 


LJ- 02: Fungsi masing-masing tag 
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g. Lembar Kerja Peserta Didik 








5. Kegiatan Belajar 5 : Menyajikan hasil Pembuatan List Minimal 
a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 5 ini Peserta Didik diharapkan dapat: 

1) Memahami Pembuatan list minimal 

2) Menyajikan hasil pembuatan list minimal 


b. Uraian Materi 
1) Pengertian List 

List adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu 
kelompok atau grup tertentu. Sebagai contoh, dalam situs web yang bertema 
kuliner, list dapat berupa daftar dari makanan dan minuman, beserta 
harganya. List dapat juga berupa prosedur (urutan langkah-langkah) dari 
suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan 
dari langkah pertama sampai langkah terakhir. 

Contoh List : 

Daftar Makanan : 

• Bakso 

• Soto 

• Sate 

• Gule 

Daftar Minuman : 

• Juice Jambu 

• Juice Alpukat 

• Juice Tomat 


2) Tipe Daftar dalam Dokumen HTML 

Dalam dokumen HTML, tipe daftar dibedakan menjadi tiga, yaitu : 
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• Daftar berurutan (ordered list) 

• Daftar tidak berututan (unordered list) 

• Daftar definisi (definition list) 

3) Daftar Berurutan (Ordered List) 

Daftar yang berurutan biasanya ditandai dengan penggunaan penomoran 
tertentu. Penomoran ini bias menggunakan angka (1, 2, 3,...) maupun karakter 
alphabet terntentu (a, b, c,... atau i, ii, iii,...). Daftar yang berurutan umumnya 
dipakai untuk item-item yang saling berhubungan satu sama lain, atau untuk 
menuliskan langkah-langkah atau prosedur dari kegiatan terntentu yang tidak 
dapat dilakukan secara acak. 

Contoh daftar yang berurutan adalah pada cara membuat dokumen HTML, 
misalnya : 

Langkah-langkah membuat dokumen HTML : 

1. Jalankan aplikasi Text Editor 

2. Isikan kode HTML ke dalam Text Editor 

3. Simpan file dengan ekstension .htm atau .html 

4. Jalankan file HTML menggunakan aplikasi Web browser 
untuk menampilkan hasilnya 


Untuk membuat suatu daftar yang berurutan dalam dokumen HTML, digunakan 
tag <ol> (ordered list), yang berpasangan dengan tag </ol>. Tag <ol> digunakan 
untuk memulai suatu daftar berurutan tertentu, sedangkan </ol> berfungsi untuk 
menandakan bahwa daftar tersebut sudah berakhir. 

Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item, 
yang kemudian perlu ditutup dengan tag </li>. 

Contoh penulisan adalah sebagai berikut: 

<ol> 

<li>Urutan Pertama</li> 
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<li>Urutan Kedua</li> 
</ol> 


Adapun atribut untuk tag <ol> adalah “type” yang menunjukan jenis 
penomorannnya. Secara standart, tipenya adalah menggunakan penomoran 1,2, 
3, 4 dst. 

Selain tipe default, tipe lain yang dapat digunakan untuk keperluan penomoran 
dalam suatu list adalah : 

Tipe Keterangan 

A Membuat list dengan penomoran berupa karakter A, B, C, dst 

a Membuat list dengan penomoran berupa karakter a, b, c, dst 

I Membuat list dengan penomoran berupa karakter I, II, III, dst 

i Membuat list dengan penomoran berupa karakter i, ii, iii, dst 


4) Daftar Tidak Berurutan (Unordered List) 

Daftar yang tidak berurutan adalah daftar yang item-itemnya dapat diubah 
posisinya secara acak. Daftar seperti ni tidak menggunakan penomoran seperti 
di atas, melainkan hanya dengan menggunakan tanda atau Symbol tertentu, 
misalnya gambar kotak atau bulat (bullet). 

Contoh : 

Daftar buah : 

• Mangga 

• Jambu 

• Semangka 

• Rambutan 

• Jeruk 

Pada contoh di atas, kita dapat mengubah/mengacak secara bebas 
urutan dari masing-masing item yang ada. Hal ini disebabkan karena setiap item 
yang ada tidak memiliki keterkaitan satu sama lain dengan item lainnya, berbeda 
dengan suatu urutan langkah tertentu yang harus ditulis secara berurutan. 
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Untuk membuat suatu daftar yang tidak berurutan dalam dokumen HTML, 
digunakan tag <ul> (unordered list), yang berpasangan dengan tag </ul>. Tag 
<ul> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ul> 
berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir. 
Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item, 
yang kemudian perlu ditutup dengan tag </li>. 

Contoh penulisan adalah sebagai berikut: 

<ul> 

<li>Item satu</li> 

<li>Item dua</li> 

</ul> 


Adapun atribut untuk tag <ul> adalah “type” yang menunjukan jenis tanda untuk 
setiap item berupa tanda bulatan untuk defaultnya.. 

Selain tipe default, tipe lain yang dapat digunakan untuk keperluan unordered list 


adalah : 

Tipe 

Keterangan 

Contoh Penulisan 

Disk 

Tanda bulatan hitam 

<ul type=”disk”> 

Circle 

Tanda bulatan putih 

<ul type=”circle”> 

Sguare 

Tanda kotak 

<ul type=”square”> 


5) Daftar Definisi (Definition List) 

Daftar Definisi adalah suatu daftar yang berisi kumpulan definisi dari suatu istilah 
tertentu, misalnya daftar definisi istilah HTML. 

Contoh : 


HTML 





Hyper 

Text 

Mark-up Language 

WWW 





World 

Wide 

Web 
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Browser 

Aplikasi 

web. 

untuk membuka dokumen html/situs 

c. Rangkuman 


Tag 

Fungsi 

<div> ... </div> 

Sebuah wilayah teks yang akan diformat 

<dl> ... </dl> 

Sebuah daftar definisi 

<dt> ... </dt> 

Sebuah istilah definisi, sebagai bagian dari 

daftar definisi. 

<dd>... </dd> 

Sesuai untuk istilah definisi, sebagai 

bagian dari daftar definisi 

<ol>... </ol> 

Ordered List atau daftar berurutan 

<ul>... </ul> 

Un-Ordered List atau daftar tidak berurutan 

<li> ... </li> 

Sebuah daftar item untuk digunakan dengan 

<ol> atau <ul>. 


d. Tugas 


Buatlah dokumen HTML berikut ini: 

<!DOCTYPE > 

<html> 

<head> 

<title>Vertebrata</title> 

</head> 

<body> 

<hl>Vertebrata</hl> 

<ul> 

<li>Ikan</span> 

<ul> 
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<li>Patin</li> 

<li>Gurami</li> 

<li>Muj air</li> 

</ul> 

</li> 

<li>Amfibi</span> 

<ul> 

<li>Ordo Anura 
<ul> 

<li>Katak Hijau </li> 

<li>Katak Darat</li> 

<li>Katak Ungu</li> 

</ul> 

</li> 

<li>Ordo Urodela 
<ul> 

<li>Salamander</li> 

<li>Mudpuppy</li> 

</ul> 

</li> 

</ul> 

</li> 

<li>Reptil</span> 

<ul> 

<li>Buaya</li> 

<li>Ular Kobra</li> 

<li>Penyu</li> 

</ul> 

</li> 

</ul> 

</body> 

</html> 

- Apa yang dapat kamu simpulkan dari daftar di atas? 

- Coba buatlah tipe bentuk bullet yang berbeda dari daftar di atas! 
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e. Tes Formatif 

1. Apa Perbedaan tag <ol> dengan <ul> ? 

2. Apa perbedaan <dl> dan <dt> ? 

3. Apa fungsi <li> ? 

4. Sebutkan contoh type bullet dalam daftar tidak berurutan! 

f. Lembar Jawaban Tes Formatif 

LJ- 01 : Perbedaan tag <ol> dengan <ul> : 


LJ- 02 : Perbedaan tag <dl> dengan <dt> : 


LJ- 03 : Fungsi <li> : 
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LJ- 04 : Contoh type bullet dalam daftar tidak berurutan: 


g. Lembar Kerja Peserta Didik 
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6. Kegiatan Belajar 6 : Menyajikan Pembuatan List Kombinasi 


a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 6 ini Peserta Didik diharapkan dapat: 

1) Memahami Pembuatan list kombinasi 

2) Menyajikan Pembuatan list kombinasi 

b. Uraian Materi 

1) Pembuatan list Kombinasi 


Perhatikan daftar berikut ini : 


Daftar Menu 

1. Makanan 

• 

Bakso 

• 

Mie Ayam 

• 

Soto 

2 . Minuman 

• 

Teh Panas 

• 

Jeruk Panas 

• 

Kopi 


Dapat dilihat bahwa daftar di atas adalah gabungan daftar berurutan dan 
daftar tidak berurutan. 

Untuk membuat daftar diatas pada dokumen HTML maka cukup 
menggabungkan <ol> dangan <ul>. 

Perhatikan penggabungan <ol> dengan <ul> berikut ini: 
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Ketika kita menggabungkan tag tidak berurutan <ul> tipe bullet dengan tag 
tidak berurutan <ul> pada daftar berikutnya, maka daftar yang kedua oleh 
browser akan ditampilkan secara otomatis menjadi daftar bullet. 

Tidak demikian dengan daftar berurutan <ol>, maka agar tipenya sama 
dengan daftar berurutan sebelumnya, kita harus memberikan atribut tipe 
yang sama dengan daftar berurutan sebelumnya. Contoh : 

<ul> 

<li> </li> 

<ol type=i> 

<li > </li> 

<li> </li> 

</ol> 

<li> 

<ol type=i> 

<li > </li> 

<li> </li> 

</ol> 

</li> 

<li> 

</li> 

</ul> 


Memulai dengan nomor tertentu 

Untuk membuat daftar bernomor dengan urutan yang tidak dimulai dengan 1 
(nomor/huruf awal), maka kita harus mendefinisikan dengan atribut “start” 
pada elemen tag <ol>. 

Misalnya contoh berikut: 
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<ol start="17"> 

<li>Blok huruf dengan text tool</li> 

<li>Klik tab karakter</li> 

<li>Pilih jenis huruf pada menu pop-up .</li> 

</ol> 

Maka urutan daftar yang ditampilkan akan dimulai dengan 17, selanjutnya 18 
dan 19. 

Demikian juga apabila : 

<o1 type="A" start="17 "> 

<li>Blok huruf dengan text tool</li> 

<li>Klik tab karakter</li> 

<li>Pilih jenis huruf pada menu pop-up .</li> 

</ol> 

Maka urutan daftar yang ditampilkan akan dimulai dengan Q, selanjutnya R, 
dan S. 

Penggunaan daftar bernomor yang tidak dimulai dengan nomor awal, 
biasanya diperlukan apabila daftar yang kita buat sudah diselingi beberapa 
paragraph, sehingga ketika dibuat daftar bernomor, secara default akan 
dimulai dari awal, padahal harusnya melanjutkan nomor sebelumnya. Maka 
digunakanlah atribut “start=” tersebut. 

c. Rangkuman 

List kombinasi adalah kombinasi daftar berurutan dengan tidak berurutan 
sekaligus. Untuk membuat daftar/list kombinasi yaitu menggabungkan atau 
mengkombinasikan tag <ol> dengan <ul>. Daftar berurutan tidak selalu diawali 
dengan nomor satu, tetapi dapat diawali dengan nomor tertentu, yaitu dengan 
memberi atribut start-’ ” 

d. Tugas 

1. Buatlah daftar seperti berikut ini dalam dokumen web : 
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Tipe-tipe Tulisan Sandi 

1. Sandi Abjad / Sandi Balik 

2. Sandi Koordinat 

3. Sandi Angka 

4. Sandi Napoleon 

5. Sandi Morse 

• Sandi Rumput 

• Sandi Bangun (Bentuk) 

• Sandi Kimia 

• Sandi Morse 1/ 

6. Sandi Semaphore 

7. Sandi Jam 

8. Sandi Nomor 

9. Sandi Geser 

10. Sandi Naik Turun Tingkat 


2. Buatlah daftar seperti berikut ini dalam dokumen web : 


i Landasan Hukum L <^ i 

al Operasional 


2. Aspek Institusional 

3. Cakupan Pelayanan 

4 Aspek Teknis dan Tek 

nologi 


a. Tempat Penampungan Sementara (TPS) 

b. Tempat Pemrosesan Akhir (TPA) 


5. Peran serta Masyarak, 

at dan Jender dalam Pengelola. 

an Sampah 

6 Permasalahan dalam 

Pengelolaan Sampah 



e. Tes Formatif 

1 .Bagaimana cara membuat list kombinasi? 

2. Atribut apa yang digunakan untuk memulai list berurutan yang tidak dimulai 
dengan 1 (pertama)? Berikan contohnya! 

3. Ketika membuat daftar berurutan diselingi daftar tidak berurutan, maka agar 
tipenya sama dengan daftar berurutan sebelumnya, apa yang harus dilakukan? 

4. Apa yang ditampilkan dari tag berikut ini : 

<ol type="A" start="10"> 

<li>Blok huruf dengan text tool</li> 

<li>Tekan CTRL+C</li> 
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<li>Berikutnya tekan CTRL+V untuk</li> 
</ol> 

5. Apa yang ditampilkan dari tag berikut ini : 

<ol type="I" start="10"> 

<li>Blok huruf dengan text tool</li> 
<li>Tekan CTRL+C</li> 

<li>Berikutnya tekan CTRL+V untuk paste</li> 
</ol> 


f. Lembar Jawaban Tes Formatif 

LJ- 01 : Cara membuat List Kombinasi: 


LJ- 02 : Atribut yang digunakan dan contohnya : 


LJ- 03 : Yang harus dilakukan : 



























LJ- 04 : Tampilan yang dihasilkan : 


LJ- 05 : Tampilan yang dihasilkan : 


g. Lembar Kerja Peserta Didik 
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7. Kegiatan Belajar 7 : Menyajikan Pembuatan Tabel 


a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 7 ini Peserta Didik diharapkan dapat: 

1) Memahami Pembuatan Tabel 

2) Menyajikan Pembuatan Tabel 

b. Uraian Materi 
1) Pembuatan Tabel 

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang 
terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table 
pada HTML, digunakan Tag<Table>. 

Elemen table berisi property <tr> untuk menentukan baris(table row) yang 
didalamnya terdapat properti <td> untuk menampkan data pada setiap sel 
table(table data). 
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Untuk mendifinisikan table heading atau judul tiap kolom menggunakan 


tag <th> . </th> 


Atribut Elemen Tabel 


Width 

=panjang(lebar table, pixel atau persen) 

Height 

=panjang(tinggi table, pixel atau persen) 

Border 

=pixel(tebal garis tepi) 

Cellspacing 

=pixel(spasi antar sel) 

Cellpadding 

=pixel(spasi di dalam sel) 

Align 

=[left|center|right](perataan table) 

Bgcolor 

=warna(warna latar belakang table) 


Atribut Table Row 


Align =[left|center|right](perataan sebaris sel secara horizontal) 
Valign =[top|middle|bottom](perataaan sebaris sel secara vertical) 
Bgcolor =warna(warna latar belakang baris) 

Atribut Tabel Data 


Align =[left|center|right](perataan horizontal) 

Width =[top|middle|bottom](perataan vertical) 

Height =pixel(tinggi sel, pixel atau persen) 

Bgcolor =warna(warna latar belakang sel) 
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c. Rangkuman 

Untuk mengatur teks ataupun gambar dalam baris dan kolom, digunakanlah 
pemformatan Tabel 


Tag Utama untuk tabel adalah : 


Tag 


Fungsi 

<table> 

.</table> 

Mendifinisikan Tabel 

<tr> ... 

</tr> 

Mendifinisikan table row atau baris 

<td> ... 

</td> 

Data pada tabel/sel 

<th> ... 

</th> 

Mendifinisikan table heading atau judul tiap kolom 


d. Tugas 

Ohtabell.html 

Salin script HTML berikut untuk mencoba tag table berikut property kolom 
dan barisnya, jangan lupa disimpan dengan ekstensi .html.kemudian coba di 
web browser. 


<html> 

<head> 

<title>tabel</title> 

</head> 

<body> 

berikut contoh tabel dengan rowspan dan colspan 
<table width=80% border=2 cellspacing=0 cellpadding=0> 
<tr> 

<td>baris 1 kolom l</td> 

<td>baris 1 kolom 2</td> 

</tr> 
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<tr> 

<th>SEMARANG</th> 

<th>Kudus</th><th>Solo</th> 

<tr> 

<tr> 

<th rowspan ="2">Jenis Kelamin</th> 
<th>Pria</th> 

<th align= "right">30</td> 

<td align= "right">20</td> 

<td align= "right">30</td> 

</tr> 

<tr> 

<th>wanita</th> 

<td align= "right">20</td> 

<td align= "right">8</td> 

<td align= "right">18</td> 

</tr> 

</table> 

</body> 

</html> 
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03: tabel3.html 

Buatlah dokumen HTML sehingga menghasilkan tampilan tabel seperti berikut 
ini (aturlah sedemikian rupa pada atribut-atribut tabel untuk mendapatkan dua 
buah tampilan yang berbeda, sebagaimana dibawah ini). 


Tabel 1. 


Nama 

Usia 

Ali 

25 

Fahmianto 

27 


Tampilan tabel 2 


Nama 

Usia 

Ali 

25 

Fahmianto 

27 


e. Tes Formatif 

1. Buatlah tabel sederhana, dengan dua baris dan dua kolom, berilah border 
keseruhannya 

2. Bagaimana jika pada tabel di atas akan diberi spasi Antara border/batas 
tabel dengan sel sebesar 30? 

3. Dari tabel di atas, buatlah warna berbeda tiap sel-nya, dengan ketentuan : 
sel kiri atas hijau, sel kanan atas merah, sel kiri bawah kuning, dan sel kanan 
bawah biru? 

f. Lembar Jawaban Tes Formatif 

LJ- 01 : Tag HTML Tabel dua baris dua kolom 
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LJ- 02 : Tag untuk memberi spasi 30 Antara batas tabel dengan sel 


LJ- 03 : Tag untuk warna berbeda tiap sel 


g. Lembar Kerja Peserta Didik 
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8. Kegiatan Belajar 8 : Menyajikan Tabel dengan Spaning 
a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 8 ini Peserta Didik diharapkan dapat: 

1) Memahami Tabel dengan Spaning 

2) Menyajikan Tabel dengan Spaning 


b. Uraian Materi 
1) Pembuatan Tabel 

Ada kalanya kita membuat table dengan menggabungkan baris, ataupun 
kolom. Berikut ini contoh tabel yang menggabungkan baris : 


Benua 

Negara 

ASIA 

Arab Saudi 

India 

Indonesia 

Singapura 


Berikut ini contoh tabel yang menggabungkan kolom : 


Benua 

EROPA 

Negara 

Belanda 

Italia 

Inggris 

Jerman 


Untuk membuat table seperti di atas, maka Tabel Atribut Data yang digunakan 
adalah sebagai berikut 

Rowspan =angka(baris yang di span oleh sel) 

Colspan =angka(kolom yang di span oleh sel) 

Jadi untuk menggabungkan 4 baris seperti table di atas adalah : 

<td rowspan=4>.</td> 
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Sedangkan untuk menggabungkan 4 kolom seperti table di atas adalah : 

<th colspan=4>.</th> 

c. Rangkuman 

Untuk menggabungkan baris ataupun kolom pada tabel, digunakan atribut: 

• Rowspan : untuk baris 

• Colspan : untuk kolom 

d. Tugas 

1. Buatlah dokumen HTML berikut ini: 

<html 

<head> 

<title>Tabel Dengan Rowspan</title> 

</head> 

<body> 

<table width="500" border="l"> 

<tr> 

<th scope="col">Nama Perumahan </th> 

<th scope="col">Tipe / Luas tanah 
(m<sup>2</sup>) </th> 

</tr> 

<tr> 

<td rowspan="4">Griya Indah Permai </td> 
<td>21 / 60 </td> 

</tr> 

<tr> 

<td>36 / 90 </td> 
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</tr> 

<tr> 

<td>45 / 120 </td> 

</tr> 

<tr> 

<td>54 / 120 </td> 

</tr> 

</table> 

</body> 

</html> 

Bagaimana hasilnya? Apa yang dapat kamu simpulkan? 

2. Buatlah dokumen HTML berikut ini : 

<html > 

<head> 

<title>Tabel dengan Colspan</title> 

</head> 

<body> 

<table width="500" border="l"> 

<tr> 

<th scope="col">Perumahan</th> 

<th colspan="4" scope="col">Tipe / Luas 
tanah (m<sup>2</sup>) </th> 

</tr> 

<tr> 
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<td>Griya Indah Permai </td> 
<td> 21 / 60 </td> 

<td>36/90</td> 

<td>45/120</td> 

<td>54/120</td> 

</tr> 

</table> 

</body> 

</html> 


Bagaimana hasilnya? Apa yang dapat kamu simpulkan? 

3. Buatlah dokumen HTML dari tampilan table berikut ini : 


Benua 

Negara 

ASIA 

Arab Saudi 

India 

Indonesia 

Singapura 

EROPA 

Belanda 

Italia 

Inggris 

Jerman 


4. Buatlah dokumen HTML dari tampilan tabel berikut ini : 


Benua 

EROPA 

ASIA 

Negara 

Belanda 

Italia 

Indonesia 

India 


Bagaimana hasilnya? Apa yang dapat kamu simpulkan? 


5. Buatlah dokumen HTML dari tampilan table berikut ini : 


apel 

pisang 


jeruk 


mangga 


nanas 
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leci 


e. Tes Formatif 

1. Apa atribut untuk menggabungkan baris? 

2. Apa atribut untuk menggabungkan kolom? 

3. Tulislah tag jika ingin menggabungkan 3 baris ! 

4. Tulislah tag jika ingin menggabungkan 3 kolom ! 

f. Lembar Jawaban Tes Formatif 

LJ- 01 : Atribut untuk menggabungkan baris 


LJ- 02 : Atribut untuk menggabungkan kolom 


LJ- 03 : Tag untuk menggabungkan 3 baris 


LJ- 04 : Tag untuk menggabungkan 3 kolom 
























g. Lembar Kerja Peserta Didik 
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9. Kegiatan Belajar 9 : Pembuatan Tabel dalam Tabel 

a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 9 ini Peserta Didik diharapkan dapat: 

1) . Memahami tabel di dalam tabel 

2) . Menyajikan tabel dalam tabel 

b. Uraian Materi 

1. Tabel di dalam Tabel (Tabel bersarang) 

Coba perhatikan gambar tabel berikut ini: 


Online Order 


Description 

Qty 

Price 

Email account note 

Email Account 

10 

$9.90 



Mailbox 

10GB 


FYIcenter.com Ad 

i 

$99.00 

Webmail 

Yes 

1-year Access 

i 

$199.00 

|POP3 

Yes 

Shipping 

$3.99 

IMAP 

Yes 

Tax 

$15.99 

Anti-Spam 

Yes 




Gambar 9.1. Tabel Online Order 


Dapat kita lihat bahwa di kolom “Email account note” ada table berisi tentang 
catatan jenis email. Jadi ada tabel di dalam tabel atau istilahnya “nested table” 
atau tabel bersarang. 


Dalam penulisan HTML “tabel bersarang” ini adalah dengan menuliskan 
HTML Tabel di dalam sebuah sel dari tabel, letaknya adalah pada 
<td>....</td>, seperti berikut ini: 
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</tr> 

</table></td> 
</tr> 

</table> 


Teknik tabel bersarang adalah salah satu cara untuk menghasilkan layout 
tabel yang kompleks tanpa membuat tabel yang sangat kompleks. Sehingga 
ketika harus membuat tabel yang kompleks, maka cara sederhananya adalah 
membuat tabel di dalam sebuah sel (<tdx/td>). 

Berikut ini contoh langkah-demi langkah : 

• Buatlah tabel dengan 2 kolom dan 2 baris. HTML tag-nya adalah sebagai 
berikut: 


<table border=l> 


<tr> 


<td>kolom 1 baris 

l</td> 

<td>kolom 2 baris 

l</td> 

</tr> 


<tr> 


<td>kolom 1 baris 

2</td> 

<td>kolom 2 baris 

2</td> 

</tr> 


</table> 



• Tentukan sel dimana kita ingin menempatkan tabel bersarang. Kita akan 
menaruh di kolom 2 baris 2. 


• Ganti teks dalam sel itu dengan tabel kedua. HTML akan terlihat seperti 
ini 


<table border=l> 


<tr> 


<td>kolom 1 baris 

l</td> 

<td>kolom 2 baris 

1</td> 

</tr> 


<tr> 
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<td>kolom 1 baris 2</td> 
<td> 

<table border=l> 

<tr> 

<td>kolom 1 baris l</td> 
<td>kolom 2 baris l</td> 
</tr> 

<tr> 

<td>kolom 1 baris 2</td> 
<td>kolom 2 baris 2</td> 
</tr> 

</table> 

</td> 

</tr> 

</table> 


Hasilnya adalah sebagai berikut: 


kolom 1 bans 1 

kolom 2 bans 1 

kolom 1 bans 2 

kolom 1 bans 1 

kolom 2 bans 1 

kolom 1 bans 2 

kolom 2 bans 2 


Trik untuk tabel bersarang adalah untuk selalu menutup tag tabel dalam 
sebelum menutup sel tabel luar. 


c. Rangkuman 

Teknik tabel bersarang adalah salah satu cara untuk menghasilkan layout 
tabel yang kompleks tanpa membuat tabel yang sangat kompleks. Sehingga 
ketika harus membuat tabel yang kompleks, maka cara sederhananya adalah 
membuat tabel di dalam sebuah sel (<tdx/td>). 


d. Tugas 

1. Buatlah dokumen HTML berikut ini : 


<html 

<head> 
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<title>Tabel Bersarang</title> 
</head> 


<body> 

<table border=l> 
<tr> 

<td> 

<table border=l> 
<tr> 

<td>kolom 1 
<td>kolom 2 
</tr> 

<tr> 

<td>kolom 1 
<td>kolom 2 
</tr> 

</table> 

</td> 

<td>kolom 2 
</tr> 

<tr> 

<td>kolom 1 
<td>kolom 2 
</tr> 

</table></body> 

</html> 


baris 

baris 


baris 

baris 


baris 


baris 

baris 


1</td> 
1</td> 


2</td> 
2</td> 


1</td> 


2</td> 
2</td> 


2. Buatlah dokumen HTML berikut ini : 


<html> 

<headxtitle>nested table 3</title></head> 

<body> 

<table border="3" cellpadding="10" 
cellspacing="10"> 

<td> 

sel berikutnya yang satu ini memiliki tabel kecil di 
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dalamnya, tabel di dalam tabel. 

</td> 

<td> <table border="3" cellpadding="3" 
cellspacing="3"> 

<td>tabel ke 2</td> 
<td>tabel ke 2</td> 

<tr> 

<td>tabel ke 2</td> 
<td>tabel ke 2</td> 

</tr> 

</table></td> 

</table> 

</body> 

</html> 


3. Buatlah dokumen HTML dari tampilan tabel berikut ini : 

Online Order 


Description 

Qty 

Price 

Email accoimt note 

Email Account 

10 

$9.90 



Mailbox 

10GB 


FYIcenter.com Ad 

i 

$99.00 

Webmail 

Yes 

1-year Access 

i 

$199.00 

|POP3 

Yes 

Shipping 

$3.99 

IMAP 

Yes 

Tax 

$15.99 

Anti-Spam 

Yes 




4. Buatlah dokumen HTML dari tampilan tabel berikut ini : 



This table is nested inside the purple 
table 






5. Buatlah dokumen HTML dari tampilan table berikut ini : 
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e. Tes Formatif 

1. Apa keuntungan teknik tabel di dalam tabel? 

2. Jelaskan cara membuat tabel di dalam tabel? 

3. Mana pernyataan berikut ini yang benar untuk tag tabel di dalam tabel? 

a. <table>..</table> diletakan di dalam sel 

b. <table>..</table> diletakan di dalam <tr>..</tr> 

c. <table>..</table> diletakan di dalam <td>..</td> 


f. Lembar Jawaban Tes Formatif 

LJ- 01 : Keuntungan teknik tabel di dalam tabel : 
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LJ- 02 : Cara membuat tabel di dalam tabel : 


LJ- 03 : Pernyataan berikut ini yang benar: 


g. Lembar Kerja Peserta Didik 
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10. Kegiatan Belajar 10 : Menyajikan Desain Halaman Web 
dengan Konsep Tabel 

a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 10 ini Peserta Didik diharapkan dapat: 

1) Memahami desain layout halaman web 

2) Memahami konsep desain web dengan tabel 

3) Menyajikan desain web dengan konsep tabel 

b. Uraian Materi 

Sebuah dokumen tidak jarang digunakan untuk menampilkan data kepada 
penggunanya. Terdapat banyak cara untuk menampilkan data, mulai dari dengan 
menggunakan grafik, daftar, sampai dengan tabel. 

Tabel pada umumnya digunakan untuk menampilkan data tabular dalam 
bentuk baris dan kolom, perpotongan baris dan kolom di dalam tabel disebut 
dengan sel. Di dalam html, memungkinkan untuk menampilkan data di dalam 
tabel secara atraktif. 

Meskipun terlihat sederhana, desain tabel yang dilakukan sampai sejauh ini 
masih merupakan sebuah tabel yang hanya menyimpan data. Data yang 
disimpan dan ditampilkan sendiri tidak memiliki struktur, sehingga tidak terdapat 
organisasi data yang baik. Pengorganisasian data yang baik dan benar pada 
sebuah tabel HTML akan sangat membantu dalam mengembangkan aplikasi 
web, terutama jika tabel yang ingin dibangun harus bersifat dinamis. 

Penambahan kolom dan baris tabel saja tidak cukup untuk 
mengorganisasikan data pada tabel, karena tidak dapat secara langsung 
mengetahui mana bagian dari tabel yang merupakan data, mana yang 
merupakan isi data, dan mana yang merupakan nilai agregasi dari data. HTML 
menyediakan beberapa elemen yang dikhususkan untuk memenuhi beberapa hal 
yang disebutkan sebelumnya, yaitu elemen table,tr,td,th, caption. 
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1) Anatomi halaman web 

Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari 
containing block, Logo, navigation, content, white space dapat digambarkan 
sebagai berikut 



Gambar 10.1 anatomi halaman web 

■ Containing Block. 

Containing block merupakan bagian dari halaman web yang 
membungkus semua komponen halaman web. Umumnya dibuat dengan 
tag <body>, <div> atau <table>. 

■ Logo. 

Identitas perusahaan, organisasi, pemilik situs. 

■ Navigation. 

Navigasi atau menu merupakan bagian penting dari situs yang 
memudahkan pengunjung berpindah-pindah halaman. 

■ Content. 

Content atau isi adalah segalanya, karena disinilah sebagian besar 
informasi disajikan. 

■ Footer. 
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Footer merupakan bagian bawah dan berisi informasi singkat pemilik situs 
(Copyright) dan beberapa link. 

■ Whitespace. 

Whitespace merupakan area kosong yang membatasi antar-komponen. 
Whitespace menjadi penting agar pengunjung mempunyai ruang berhenti 
di antara bagian-bagian situs yang lain. Whitespace dapat juga diisi 
dengan banner atau animasi. 

2) Layout halaman web 

Layout situs merupakan tata letak elemen halaman situs web.Layout situs 
yang baik akan menjadikan halaman web web baik juga. Dengan desain 
halaman web yang baik dan tepat akan membuat pengunjung merasa nyaman 
dengan tampilan (layout) halaman web tersebut, dan tetap dapat fokus pada isi 
(content). Desain halaman web tidak mengganggu kejelasan bagian isi. 

Pada desain layout yang tepat, pengunjung dapat berpindah ke halaman lain 
dengan mudah melalui navigasi yang baik, mudah dan informatif. Pengunjung 
merasa bahwa setiap halaman dari situs merupakan satu kesatuan. Setiap 
halaman memiliki posisi dan kesamaan tampilan (layout), yang berbeda hanya isi 
(content). 

Adanya layout tata letak yang baik dapat membuat halaman lebih cantik dan 
seimbang, terutama enak dilihat dan mudah dibaca. Desain layout suatu 
halaman web meliputi penyusunan: 

- pembagian tempat pada halaman 

- pengaturan jarak sepasi 

- pengelompokan teks dan grafik 

- serta penekanan pada suatu bagian tertentu 

Beberapa model layout yang biasa digunakan dalam mendesain suatu 
halaman web, diantaranya adalah 

Top lndex 

digunakan untuk menampilkan link yang banyak ke situs lain, seperti 
search engine 
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Banner atau iklan 


Daftar isi atau navigasi 


Body atau contents (isi) 


Informasi tambahan / lain-lain 


Gambar 10.2 model layout top index 

Navigasi atau daftar isi berada dibagian atas dari halaman web, seperti pada berikut 
merupakan tampilan dari www.google.com 


He Edt Wew H&ary Bjotanarfs Tpofe ttefc 
^HTMLteMetag j GoogleTranstate J 0layout 




gooje-om^ ;r di?' cplj* cut+titte+Mfc^botcr- +r 


HH 


^3 Ttya dayarrf-a | nrj Q Cecost - ardfcectiie jjtj desgnboan magazne 3 PT. Archtectana Mtd 


I toorid Ftratosh» Ph. 


> Gams Hafa - Haf a G . 


Google layout table web bottom mdex 

Web Images Shopping 


+endah ^ Share 


CSS Positioning and Lavout - Web Desion - Aboot.com 
hh weMesign.aoout cor > > CSS > Beginning CSS > CSS Tutorial - 
b/ Jernfet Kymm - In 1,887 Go: 

H Before you can place an element in your Web page design or create a layout, 
you need... The lower the z-index (down to -100) the more likely it wiB be on 
the bottom ... HTML Codes - Special Charaders - ASCII Table How to Budd 

s Website ... 


CSS z-index propertv - W3Schools 

kwwwSscnoois conVcssref/pr_po$_i-index asp * W3SchoDis- 

NET PHP SOLtutoiials, references, examples (or web building. ... background- 

position background-repeat badcground-size border border-bottom border- 

bottom-c olor .„ The z-index property specifies the stack order of an element. An 

element with greater stack order is ahvays m front of an element wrth a lower stack 

CSS table-lavout propeitv- W3Sctiools 
w»ww3scriool5.comfcssref/pr_tab_table-layoiJt asp » W3Schools' 

... RSS ASP NET PHP SQL tutorials, references, examples for web building ... The 
table-layout property sets the table layout algorithm to be used fbr a table 

Visual formatting model 

www3 org/TR/CSS2Msuren Mml » Wodd Wide Web Consorti. - 
9 9.1 Specifying the stack levet the 'z-index' property... User agents may change the 
document's layout «tren the viewport is resized (see the... Wocks and non-replaced 
table cells are block contamers but not block-lenel boxes. — For retatwely positioned 
boxes, the ofeet is with respect to the bottom edge of the box rtsetf 

The Internet Explorer hasLavout Propertv - SitePointCSS Reference 

reference.sitepoint :onVcss/Haslayout * SitePoint - 

In a perfect wodd. we shouldri! need to know anything sboui the hasLayout... body and 
html (in standards mode); table , tr, th , td; mg; hr; input , button . file , select... More 
eramples of unwanted behavior are documented on the MSDN web siie — Leam 
CSS31 Cheat Sheet | CSS Tutorial | Selectors I Properties lndex... 


Gambar 10.3 contoh halaman web dengan layout top index 

Bottom lndex 

Biasanya digunakan apabila isi dari halaman banyak berhubungan 
dengan topik tunggal 
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Banner/Judul 


Body atau contents (isi) 


Daftar isi / lain-lain 

Gambar 10.4 model layout bottom index 

Navigasi atau daftar isi berada dibagian bawah dari halaman web, seperti 
pada berikut merupakan tampilan halaman web education and training 
berikut ini 


Low graphic version |Find... Search | 

Welcome to Design for All Education and Training 

Design for All is about ensuring that environments, products, Services and 
interfaces work for people of all ages and abilities. Many professionals and 
students are interested in this, but there has been no easy source of 
Information, methods, tools and examples to help them achieve it. This 
website aims to plug that gap by bringing together new and existing 
Information and making it accessible via a single user-friendly interface. 
Originaliy developed as the RSA Inclusive Design Resource the website is 
now being further developed by EDeAN as Design for Ali Education and 
Training. 




This website is for design students and their tutors, Professional designers, design 
managers and policy makers across Europe. It was created to introduce newcomers to key 
concepts, examp!es and design/research methods, and to support practltloners in butlding 
up their own collection of tools and technigues. 

For more information about EDeAN vislt www.edean.oro 
For more information about the RSA visit www.theRSA.oro 


Home paoe Accessibilitv Low oraphic Leoal Contact us 


Too of pace 


Gambar 10.5 contoh halaman web dengan layout bottom index 
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Left lndex 

Digunakan untuk layar dengan resolusi yang lebar sehingga mudah 
dalam penyediaan navigasi, tanpa menimbulkan kekacauan penyajian 
pada halaman utama 



Banner / Judul 

Daftar 

Body atau contents (isi) 

Isi 


lain-lain 


Gambar 10.6 model layout left index 


Navigasi atau daftar isi berada dibagian kiri dari halaman web, seperti pada 
berikut merupakan tampilan halaman web berikut ini 
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Gambar 10.7 contoh halaman web dengan layout left index 


Layout Split 

Merupakan model yang banyak dipakai, karena terjaga keseimbangan 
dalam halaman web 


Daftar 

Isi 

Banner/Judul 

Daftar 

Isi 

Body atau contents (isi) 

lain-lain 


Gambar 10.8 model layout split 


Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web, 
seperti pada berikut merupakan tampilan halaman web yang diambil dari 
theme wordpress berikut ini 
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Gambar 10.9 contoh halaman web dengan layout split 


Alternating lndex 

digunakan untuk halaman yang banyak menampilkan grafik, foto dan 
produk yang disertai dengan teks berupa keterangan, harga, jumlah, dan 
lain - lain. 


Teks/Daftar isi 

Gambar 

Gambar 

Teks/Daftar isi 

lain-lain 


Gambar 10.10. model layout alternating index 
Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web, 
seperti pada berikut merupakan tampilan halaman web yang diambil dari 
theme di http://www.csszengarden.eom/050// berikut ini 
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Gambar 10.11 contoh halaman web dengan layout alternating index 


3) Desain halaman web dengan konsep tabel 
Top lndex 

Berikut adalah listing program untuk membuat layout “top index” halaman 
web dengan elemen table. 

<!DOCTYPE html> 

<head> 

<title>Top index</title> 

</head> 

<body> 

<form id="forml" name="forml" method="post" action=""> 
<table width="800" height="542" border="l" 
align="center"> 

<tr> 

<td height="23" align="center" 
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bordercolor="#FFFFFF" bgcolor="#FFFFOO"><strong><font 
size="+5">Banner 

atau iklan</fontx/strong></td> 

</tr> 

<tr> 

<td height="27" align="center" 
bgcolor="#FFCCCC"Xfont color="#FF0000">Daftar 
isi atau navigasi </fontx/td> 

</tr> 

<tr> 

<td height="457" align="center" bgcolor="#FF66CC"> 
<p>Body atau contents(isi)</p> 

<pXfont color="#006600">Body atau 
contents(isi)</font></p> 

<pXfont color="#CC0000">Body atau 
contents(isi)</font></p> 

<pXfont color="#FFFF00">Body atau 
contents (isi) </fontX/p> 

<pXfont color="#FF6633">Body atau 
contents (isi) </fontX/pX/td> 

</tr> 

<tr> 

<td height="23" align="center" 
bgcolor="#CCFF99"Xfont color="#9966CC">Info 
tambahan atau lain-lain </fontX/td> 

</tr> 

</table> 

</form> 

</body> 

</html> 


Bila listing program di atas dijalankan maka akan menghasilkan tampilan 
halaman web seperti berikut ini : 
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Gambar 10.12 penerapan <table> pada layout top index 

Bottom lndex 

Berikut adalah listing program untuk membuat layout “bottom index” halaman 
web dengan elemen table. 

<!DOCTYPE html> 

<head> 

<title>Top index</title> 

</head> 

<body> 

<form id="forml" name="forml" method="post" action=""> 

<table width="800" height="542" border="l" 
align="center"> 

<tr> 
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<td height="23" align="center" bordercolor="#FFFFFF" 
bgcolor="#FFFFOO"Xstrong><font size=" + 5">Banner 

/ Judul</font></strong></td> 

</tr> 

<tr> 

<td height="457" align="center" bgcolor="#CCCCCC"> 

<p>Body atau contents (isi)</p> 

<p><font color="#006600">Body atau 
contents(isi)</font></p> 

<p><font color="#CC0000">Body atau 
contents(isi)</font></p> 

<pXfont color="#FFFF00">Body atau 
contents(isi)</font></p> 

<p><font color="#990033">Body atau 
contents(isi)</font></p></td> 

</tr> 

<tr> 

<td height="23" align="center" 
bgcolor="#CCFF99"Xfont color="#FF0000"XstrongXfont 
size="+2">Daftar 

isi atau navigasi </font></strong></font><font 
color="#9966CC" size="+2">&nbsp; </fontx/td> 

</tr> 

</table> 

</form> 
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</body> 

</html> 


Bila listing program di atas dijalankan maka akan menghasilkan tampilan 
halaman web seperti berikut ini : 



Gambar 10.13 penerapan <table> pada layout bottom index 

Left lndex 

Berikut adalah listing program untuk membuat layout “left index” halaman 
web dengan elemen table. 

<!DOCTYPE html > 

<head> 

<title>Left Colour</title> 

</head> 
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<body> 

<form id="forml" name="forml" method="post" action=""> 

<table width="800" height="447" border="l" 
align="center" cellspacing="1"> 

<tr> 

<th width="160" rowspan="3" valign="top" 
bgcolor="#9933 66"><p>Home</p> 

<p>Profile</p> 

<p>About Us</p> 

<p>Blog</p> 

<p>Contact Us</p></th> 

<th width="627" height="23" align="center" 
bgcolor="#FFFF99"XstrongXf ont color="#CCCCCC" 
size="+4">Electronic 

Shop</font></strong></th> 

</tr> 

<tr> 

<td height="176" align="center" valign="top" 
bgcolor="#FFFF99"Xp>&nbsp; </p> 

<p>Selamat datang di web kami, penjualan produk 
Online ini adalah yang pertama di kota kami. 

kualitas dan harga dapat dipercaya langsung saja 
pesan dan menjadi langganan kami. 
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</p></td> 

</tr> 

<tr> 

<td height="30" align="center" bgcolor="#FFFF99"> 
<font size="+2">profilkami.com</font></td> 

</tr> 

</table> 

</form> 

</body> 

</html> 


Bila listing program di atas dijalankan maka akan menghasilkan tampilan 
halaman web seperti berikut ini : 


J Left Colour x 


C D file:///C:/xampp/htdocs/BukuWeb/leftIndex.html 

H 


Home 

Profile 

About Us 

B log 

Contact Us 


Selamat datang di web kami, penjualan produk online ini adalah yang pertama di kota kami, kualitas dan 
harga dapat dipercaya langsung saja pesan dan menjadi langganan kami. 

prcfilkami.coni 


Gambar 10.14 penerapan <table> pada layout left index 


Layout Split 

Berikut adalah listing program untuk membuat layout “split” halaman web 
dengan elemen table. 
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<!DOCTYPE html > 

<head> 

<title>left </title> 

</head> 

<body> 

<form id="forml" name="forml" method="post" action=""> 

<table width="800" height="512" border="l" 
align="center"> 

<tr> 

<td width="15%" rowspan="2" align="center" 
bgcolor="# 99CC99"Xstrong>Daf tar 

Isi </strong> </td> 

<td width="67%" height="23" align="center" 
bgcolor="#FFCCFF"Xf ont 

size="+3"Xstrong>Banner/ judul</ strong></ font></td> 

<td width="18%" rowspan="2" align="center" 
bgcolor="# 99CC99"Xstrong>Daf tar 

Isi </strong> </td> 

</tr> 

<tr> 

<td height="456" align="center" 
bgcolor="#CCCCCC"> 

<p>Body atau contents(isi)</p> 

<p><font color="#006600">Body atau 



117 | P a g e 










contents(isi)</font></p> 

<p><font color="#CC0000">Body atau 
contents (isi) </fontX/p> 

<pXfont color="#FFFF00">Body atau 
contents(isi)</font></p> 

<pXfont color="#990033">Body atau 
contents (isi)</font></p> 

</td> 

</tr> 

<tr bgcolor="#FF99FF"> 

<td height="23" colspan="3" align="center">Lain- 
lain </td> 

</tr> 

</table> 

</form> 

</body> 

</html> 

Bila listing program di atas dijalankan maka akan menghasilkan tampilan 
halaman web seperti berikut ini : 
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Gambar 10.15 penerapan <table> pada layout split 

Alternating lndex 

Berikut adalah listing program untuk membuat layout “alternating index” 
halaman web dengan elemen table. 

<!DOCTYPE html > 

<head> 

<title>alternating</title> 

</head> 

<body> 

<form id="forml" name="forml" method="post" action=""> 

<table width="800" height="738" border="l" 
align="center"> 

<tr> 

<td height="248" align="center" 
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bgcolor="#FF66CC"Xfont size=" + l "><strong>Teks/Daftar 

isi</strong></font></td> 

<td align="center" bgcolor="#FFFFCC"Xfont 
color="#0000 66" size="+7"XstrongXem>Gambar 

</em> </strong></font></td> 

</tr> 

<tr> 

<td height="261" align="center" 
bgcolor="#FFFF99"Xfont color="#CC0000" 
size="+7 "XstrongXem>Gambar 

</em></strong></fontXfont 
size="+7 "><em></ emX/f ontX/td> 

<td align="center" bgcolor="#FF66CC"Xfont 
size=" + l"Xstrong>Teks/daftar 

isi</strong></font></td> 

</tr> 

<tr bgcolor="#996666"> 

<td height="150" colspan="2" align="center"xfont 
color="#FFFFFF"Xstrong><font size=" + l">Lain- 
lain</font></strong></fontX/td> 

</tr> 

</table> 

</form> 

</body> 
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</html> 

Bila listing program di atas dijalankan maka akan menghasilkan tampilan 
halaman web seperti berikut ini : 


J Q| alternating x 

C D file:///C:/xampp/htdocs/BukuWeb/alternating.htmI 


☆ = 


Teks/Daftar isi 

Gambar 

Gambar 

Teks/daftar isi 

Lain-lain 


Gambar 10.16 penerapan <table> pada layout alternating index 


c. Rangkuman 

Pada kegiatan belajar desain Web dengan Konsep Tabel dapat 
disimpulkan menjadi beberapa point penting seperti berikut 

■ Tabel pada umumnya digunakan untuk menampilkan data tabular dalam 
bentuk baris dan kolom, perpotongan baris dan kolom di dalam tabel disebut 
dengan sel. 

■ HTML menyediakan beberapa elemen yang dikhususkan untuk memenuhi 
beberapa hal yang disebutkan sebelumnya, yaitu elemen table,tr,td,th, 
caption. 
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■ Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari 
containing block, Logo, navigation, content, white space 

■ Desain layout suatu halaman web meliputi penyusunan: 

- pembagian tempat pada halaman 

- pengaturan jarak sepasi 

- pengelompokan teks dan grafik 

- serta penekanan pada suatu bagian tertentu 

■ Beberapa model layout yang biasa digunakan dalam mendesain suatu 
halaman web, diantaranya adalah top index, bottom index, left index, layout 
split, alternating index 

d. Tugas 

Sebelum mengerjakan tugas, buatlah kelompok, terdiri atas 2-3 orang. Dalam 
kegiatan ini masing-masing kelompok kerjakan tugas berikut: 

1. Buat desain layout halaman web yang dengan tema web sekolah atau 
web daerah. Desain halaman web tersebut dengan menggunakan salah 
satu model layout tabel 

2. Terapkan desain layout tabelnya ke dalam listing program sehingga 
menjadi halaman web yang menarik. 

3. Lengkapi halaman web tersebut dengan teks 

4. Kemudian secara bergantian masing-masing kelompok 
mempresentasikan hasilnya didepan kelas. 

e. Tes Formatif 

Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir 
soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya 
pada lembar jawaban test formatif yang telah disediakan. 

1. Jelaskan tentang bagian dari anatomy sebuah halaman web 

2. Sebutkan dan jelaskan tentang 5 model layout pada halaman web 

3. Tuliskan listing kode dengan memanfaatkan elemen table untuk membuat 
sebuah halaman web sebagai berikut 
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WEB SEKOLAH KITA 


mu 

rofil Sekolah 
lalery Foto 
Legiatan 
lubungi Kami 


ISI DAKI HALAMAN "WEB 


Copyright © sekolahkita 


.c om 


f. Lembar Jawaban Tes Formatif 

LJ- 01 : anatomy sebuah halaman web 
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LJ- 02 : 5 model layout pada halaman web 


LJ- 03 : listing kode elemen table pada halaman web 
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g. Lembar Kerja Peserta Didik 
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11. Kegiatan Belajar 11 : Menyajikan Format Tampilan Gambar 


a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 11 ini Peserta Didik diharapkan dapat: 

1) Memahami Format tampilan gambar 

2) Menyajikan Format tampilan gambar 

b. Uraian Materi 

Memasukkan Gambar ke dalam Plalaman Web 

Suatu halaman i/i/ebakan terlihat kaku, terkesan formal, dan sedikit menjemukan 
bila tidak disertai dengan gambar. Kita bisa lihat saat ini, halaman web yang ada 
di \nternet, hampir semuanya memasukkan unsur gambar, animasi, bahkan 
audio dan video untuk menarik dan membuat tercengang para pengunjungnya. 

Sebagai contoh lain, misalnya ingin membuat halaman web yang berisi koleksi 
foto, maupun barang-barang yang sesuai dengan hobi. Dalam kasus ini, tentu 
harus memahami teknik untuk menampilkan foto tersebut ke dalam halaman web 
sehingga akan tampil rapi dan menarik. 

Cara yang diperlukan untuk memasukkan atau menambahakan gambar ke 
dalam suatu halaman web sangatlah mudah. HTML telah menyediakan tag 
khusus untuk keperluan ini, yaitu <img>. Tag ini merupakan tag tunggal atau 
tidak memiliki pasangan. Atribut terpenting dari tag <img> adalah SRC (source 
atau sumber), yang berisi file gambar yang akan ditampilkan ke dalam halaman 
web. 

Bentuk umum penggunaan tag <img> adalah : 


<img src="namafile"> 


Jika file yang akan ditampilkan berada di direktori lain, atau bahkan berada di 
situs web lain, makan perlu menyebutkan juga lokasi dari file tersebut. 

Contoh: 


<img src= "../image/komputer.jpg"> 


Atau 


<img src=http://www.abcde.com/image/kamera.jpg/> 
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Contoh hasil dokumen HTML di Web Browser seperti gambar berikut: 



Ql Menyajikan format gambar x 


C O. KBll-gambar.html 

Menyajikan format gambar 


_ □ X 


Gambar 11.1. Menyajikan Format Gambar 


Format gambar yang sering digunakan dalam halaman web adalah GIF (.gif ) 
dan JPEG (.jpg atau . jpeg ). GIF adalah singkatan dari Graphics Interface 
Format sedangkan JPEG, adalah singkatan dari Joint Photographic Expert 
Group. Selain kedua format tersebut, saaat ini juga sudah mulai banyak 
digunakan gambar dengan format PNG (.png ), yanag merupakan singkatan dari 
Portable Network graphics. 

Menggabung Gambar dan Teks 


Jika kita ingin menggabungkan ataumenyisipkan gambar di dalam suatu teks 
atau paragraf tertentu, terdapat pilihan posisi gambar yang harus diperhatikan: 
Secara vertikal: 

• Teks bisa berada sejajar dengan bagian atas gambar 

• Teks bisa berada sejajar dengan bagian tengah gambar 

• Teks bisa berada sejajar dengan bagian bawah gambar 


Secara horisontal: 
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• Gambar bisa berada di bagian kiri teks/paragraf 

• Gambar bisa berada di bagian kanan teks/paragraf 

Untuk posisi gambar yangdilihat dari arah vertikal dapat ditentukan dengan 
mengisi nilai TOP, MIDDLE, atau BOTTOM ke dalam atribut ALIGN yang 
terdapat pada tag <img>. 

Contoh hasil dokumen HTML di Web Browser seperti gambar berikut: 



[2] Gambar 


C ^ ll-2.html 


9 a = 


Men gg abung Gambar dan Teks, posisi terhadap teks 
secara vertikal 



Komputer 1 (menggunakan align=TOP) 


Komputer 2 (menggunakan align=MIDDLE) 


Komputer 3 (menggunakan align=BOTTOM) 


Gambar 11.2. Menggabungkan Gambar dan Teks arah vertikal 


Adapun untuk posisi gambar yang dilihat dari arah horisontal ditentukribut an 
dengan mengisi nilai LEFT dan RIGHT kedalam ALIGN pada tag <img>. Dengan 
mengisi atribut tersebut dengan nilai LEFT maka gambar akan berada di sebelah 
kiri teks. Sebaliknya, jika diisi RIGHT akan menyeabkan posisi gambar akan 
berada di sebelah kanan teks. 

Contoh hasil dokumen HTML di Web Browser seperti gambar berikut: 
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C p» ll-3.html ^ Q v = 

Menggabung Gambar dan Teks, posisi 
terhadap teks secara horisontal 



Gambar 11.3. Menggabungkan Gambar dan Teks arah horisontal 

Memperkecil dan Memperbesar Ukuran Gambar 

gambar yang ditampilkan pada dokumen HTML terkadang tidak memiliki ukuran 
gambar yang sama dengan ukuran sebenarnya. Untuk menghasilkan gambar 
dengan kualitas yang mirip aslinya, penentuan ukuran juga menjadi hal yang 
penting untuk diperhatikan. Maka dari itu perbandinganya harus sesuai dengan 
ukuran asli dari gambar tersebut. Untuk menentukan ukuran gambar, kita perlu 
mengisi atribut HEIGHT berfungsi untuk menetukan tinggi gambar dan WIDTH 
untuk menetukan lebar gambar. Perhatikan contoh berikut ini. 

<img src="images/komputer.jpg" /> 

Kode diatas akan menampilkan gambar dari file komputer.jpg yang berada dalam 
direktori images sesuai dengan ukuran asli (misal 500X375 pixel). 

Untuk memperkecil gambar tersebut, kita tinggal memperkecil nilai-nilai tersebut, 
misalnya 

<img src=images/komputer.jpg" width=320" height="230" /> 


Memberi keterangan pada gambar 
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Agar lebih terkesan informatif, anda dapat memberikan keterangan yang relevan 
dan seperlunya (tidak berlebihan) terhadap gambar yang anda tampilkan pada 
halaman web. Keterangan ini akan muncul dalam bentuk tooltip ( sesaat, hanya 
beberapa detik) pada saat penunjung mengarahkan kursor (penjujuk mouse) ke 
atas gambar. 

Untuk membuat keterangan semacam ini, kita dapat menggunakan atribut TITLE 
maupun ALT pada tag <img>. 

<img src="namafile" title="keterangan"/> 

Contoh hasil dokumen HTML di Web Browser seperti gambar berikut: 



D Menyajikan format gambar x ' 


- |a ! x 


C QvKBll-gambar-alt.html ^ 9 V Q = 

Menyajikan format gambar dengan Keterangan 


Gambar 11.4. Menyajikan format gambar dengan keterangan 

Pada gambar di atas dapat dilihat bahwa keterangan gambar terlihat pada saat 
mouse di atas gambar, di sana tertulis “Komputer Desktop” sebagai keterangan 
gambar. 

c. Rangkuman 

■ Untuk menampilkan format gambar digunakan tag <img>, dengan atribut 
src=”letak dan nama file gambar”, serta ukuran width-’” untuk lebar 
gambar dan height-’” untuk tinggi gambar. 

■ Untuk membuat keterangan menggunakan atribut TITLE maupun ALT 
pada tag <img>. 
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d. Tugas 

Latihan 1. Memasukkan Gambar ke dalam Halaman Web 

^ Buatlah direktori baru dengan nama images di dalam direktori kerja 

'k Siapkanlah file gambar berupa Computer, dengan tiga format berbeda 
yaitu GIF, JPEG dan PNG. Copy file gambar yang akan di tampilkan ke 
dalam direktori images 


Catatan : Dalam contoh ini menggunakan file komputer.gif, komputer.jpeg, 
dan komputer.png. 

'k Buatlah dokumen HTML berikut: 

<html> 

<head> 

<title>Gambar</title> 

</head> 

<body> 

<p>Latihan Menambahkan Gambar GIF, JPG, dan PNG</h2> 

<p>Menampilkan gambar dalam format GIF:</p> 

Cimg src="images/komputer.gif"/> 

<p>Menampilkan gambar dalam format JPG:</p> 

Cimg src="images/komputer.jpg"/> 

<p>Menampilkan gambar dalam format PNG:C/p> 

Cimg src="images/komputer.png"/> 

c/body> 

C/html> 

'k Simpan file dengan nama gambar.html dan tempatkan ke dalam direktori 
kerja 

'k Bukalah file tersebut melalu web browser 


132 | P a g e 





Pemrograman Web Semester 1 


Pada contoh di atas,ditampilkan tiga gambar dengan format yang berbeda. 
Gambar pertama (paling atas) menggunakan format GIF, kedua JPG, dan ketiga 
PNG. Seperti yang terlihat, format-format tersebut dapat ditampilkan dengan baik 
di dalam halaman web. Nilai yang kita isikan untuk atribut SRC di atas 
mengandung nama direktori images. 

<img src=”images/komputer.gif7> 

<img src=”images/komputer.jpg7> 

<img src=”images/komputer.png7> 

Ini artinya file tersebut disimpan di ddirektori images, dimana direktori images itu 
sendiri berada dalam direktori kerja (satu direktori dengan file gambar.html). 
Latihan 2. Menggabung Gambar dan Teks (bagian 1) 

Catatan; Dalam contoh ini menggunakan file yang sama seperti pada 
Latihan 1. 

^ Buatlah dokumen HTML berikut: 

<html> 

<head> 

<title>Gambar</title> 

</head> 

<body> 

<h2>Latihan Menggabung Gambar dan teks (bag.l)</h2> 

<P> 

<img src="images/komputer.gif" align="top"/> 

Komputer 1 (menggunakan align=TOP) 

</p> 

<P> 

<img src="images/komputer.jpg"/> align="middle"/> 

Komputer 2 (menggunakan align=MIDDLE) 

</p> 

<p> <img src="images/komputer,png"/> align="bottom"/> 
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Komputer 3 (menggunakan align=BOTTOM) 

</p> 

</body> 

</html> 

'k Simpan file dengan nama gambar_plusteks.html dan tempatkan ke 
dalam direktori kerja 

^ Bukalah file tersebut melalui web browser. 

Dari hasil di atas tampak jelas bahwa pada gambar bagian pertama teks berada 
sejajar dengan bagian atas gambar. Untuk melakukan hal ini, kita perlu mengisi 
atribut ALIGN dengan nilai TOP. 

<img src="images/komputer.gif" align="top"/> 

Pada gambar kedua, teks berada di tengah-tengah gambar karena kita mengisi 
nilai MIDDLE pada atribut ALIGN. 

<img src="images/komputer.jpg" align="middle"/> 

Terakhir, pada gambar ketiga, teks berada sejajar dengan bagian bawah gambar 
karena kali ini atribut ALIGN adalah BOTTOM 


<img src="images/komputer.png" align="bottom"/> 


Latihan 3. Menggabung Gambar dan Teks (Bagian 2) 

'k Masih menggunakan file gambar yang sama dengan latihan 1 
'k Tulislah tag html berikut: 


<html> 


<head> 


<title>Gambar</title> 

</head> 


<body> 


<h2>Latihan 

Menggabung Gambar dan Teks (Bag. 2) </h2> 

<p><u>Gambar 

ada di sebelah kiri teks:</u></p> 
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<p> 

<img src="images/komputer.gif" align"left"/> 


Pada paragraf ini gambar akan ditempatkan di sebelah 
kiri teks. Hal ini disebabkan atribut ALIGN diisi dengan 
nilai LEFT. Pada paragraf ini gambar akan ditempatkan di 
sebelah kiri teks. Hal ini disebabkan atribut ALIGN diisi 
dengan nilai LEFT. Pada paragraf ini gambar akan ditempatkan 
di sebelah kiri teks. Hal ini disebabkan atribut ALIGN diisi 
dengan nilai LEFT. Pada paragraf ini gambar akan ditempatkan 
di sebelah kiri teks. Hal ini disebabkan atribut ALIGN diisi 
dengan nilai LEFT. Pada paragraf ini gambar akan ditempatkan 
di sebelah kiri teks. Hal ini disebabkan atribut ALIGN diisi 
dengan nilai LEFT. 


</p> 

<p><u>Gambar ada di sebelah kanan teks:</u></p> 


<P> 

<img src="images/komputer.gif" align"right"/> 


Pada paragraf ini gambar akan ditempatkan di sebelah kanan 
teks. Hal ini disebabkan atribut ALIGN diisi dengan nilai 
RIGHT. Pada paragraf ini gambar akan ditempatkan di sebelah 
kanan teks. Hal ini disebabkan atribut ALIGN diisi dengan 
nilai RIGHT. Pada paragraf ini gambar akan ditempatkan di 
sebelah kanan teks. Hal ini disebabkan atribut ALIGN diisi 
dengan nilai RIGHT. Pada paragraf ini gambar akan 
ditempatkan di sebelah kanan teks. Hal ini disebabkan 
atribut ALIGN diisi dengan nilai RIGHT. Pada paragraf ini 
gambar akan ditempatkan di sebelah kanan teks. Hal ini 
disebabkan atribut ALIGN diisi dengan nilai RIGHT. 

</p> 

</body> 

</html> 


S Simpan file dengan nama gambar_plusteks2.html dan tempatkan ke 
dalam direktori kerja. 


s Bukalah file tersebut melalui web browser 
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Latihan 4 Memperkecil gambar 

'k Masih menggunakan file gambar yang sama dengan latihan 1 
Catatan: Dalam contoh ini menggunakan file komputer.jpg. 

^ Buatlah dokumen HTML berikut: 

<html> 

<head> 

<title>gambar</title> 

<head> 

<body> 

<h2>Latihan memperkecil gambar</h2> 

<P> 

<u>gambar ukuran asli (500X375 pixel ):</u><br /> 

<img src="images/komputer.jpg" /> 

</p> 

<P> 

<u> gambar yang diperkecil (320X230 pixel) :</u><br /> 

Cimg src="images/komputer.jpg" width ="320" height="230" /> 
<P> 

<body> 

<html> 

'k Simpan file dengan nama gambar_perkecil.html dan tempatkan kedalam 
direktori kerja 

'k Bukalah file tersebut melalui web browser 

Latihan 5. Memperbesar Gambar 

Masih menggunakan file gambar yang sama dengan latihan 1 
Catatan: Dalam contoh ini menggunakan file komputer.jpg. 
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'k Buatlah dokumen HTML berikut: 

<html> 

<head> 

<title>gambar</title> 

<head> 

<body> 

<h2>Latihan memperbesar gambar</h2> 

<P> 

<u>gambar ukuran asli (500X375 pixel) :</u><br /> 

Cimg src="images/komputer.jpg" /> 

</p> 

<u> gambar yang diperbesar (600X440 pixel) :</u><br /> 

<img src="images/komputer.jpg" width ="600" height="440" /> 
<P> 

<body> 

<html> 

^ Simpan file dengan nama gambar_perkecil.html dan tempatkan kedalam 
direktori kerja 

'k Bukalah file tersebut melalui web browser 
Sebaliknya, untuk memperbesar gambar tersebut, kita perlu memperbesar nilai- 
nilai dari atribut di atas, misalnya menjadi 600X420 pixel. Kodenya akan tampak 
seperti berikut: 

Cimg src="images"/komputer.jpg" width="600" height="440" /> 

Hati-hati dalam memperbesar gambar, jangan sampai gambar terlihat pecah. 
Cari nilai-nilai optimal untuk mengubah nilai dari tersebut WIDTH dan HEIGHT. 

Latihan 6: memberi keterangan pada gambar 

Catatan : Dalam contoh ini menggunakan file komputer.jpg. 

'k Buatlah dokumen HTML berikut: 
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<html> 

<head> 

<title>gambar</title> 

<head> 

<body> 

<h2>Latihan pemberi keterangan pada gambar</h2> 

<p>arahkan penunjuk mouse anda ke atas gambar dibawah ini 
untuk melihat keterangan yang dimaksud!</p> 

<P> 

<img src="images/komputer.jpg" 

title="Komputer Desktop" /> 

</p> 

</body> 

</html> 

Simpan file dengan nama gambar_keterangan.html dan tempatkan 
kedalam direktori kerja 

s Jalankan file tersebut melalui web browser 
Coba perhatikan teks toolip yang muncul pada hasil di atas. Teks tersebut adalah 
teks yang diisikan ke dalam atribut title pada tag <img>. Untuk keperluan yang 
sama, juga dapat menggunakan atribut ALT. 

Latihan 7. Latihan fungsi ALT 

Buatlah seperti dokumen html pada Latihan 6, tetapi tag untuk gambarnya adalah 
sbb : 

<img src="images/notebook.jpg" alt="notebook"> 

Beri nama file fungsi-alt.html, biarkan di direktori image tanpa file gambar 
notebook.jpg 
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Bukalah file fungsi-alt.html dengan web browser Mozilla Firefox atau browser lain 

yang sebelumnya disetting tidak menampilkan gambar, apa yang ditampilkan? 

Apa yang dapat kamu simpulkan dengan fungsi atribut ALT? 

e. Tes Formatif 

1. Sebutkan tag untuk menampilkan gambar! 

2. Sebutkan atribut dan fungsinya pada tag untuk menampilkan gambar! 

3. Apa yang terjadi jika file ukuran 100 x 100 pxl diperbesar menjadi 500 x 500 
pxl? 

4. Apakah file gambar dengan ukuran 500 x 500 pixel kemudian diperkecil 
tampilannya pada dokumen html juga memperkecil ukuran file? Coba dan 
diskusikan dengan temanmu! 


f. Lembar Jawaban Tes Formatif 

LJ- 01 : Tag untuk menampilkan gambar 


LJ- 02 : Atribut dan fungsinya 






















LJ- 03 : Tampilan gambar yang terjadi: 


LJ- 04 : File gambar dengan ukuran 500 x 500 pixel kemudian diperkecil 
tampilannya, kesimpulannya: 


g. Lembar Kerja Peserta Didik 
























Pemrograman Web Semester 1 
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12. Kegiatan Belajar 12 : Format Tampilan Audio 


a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 12 ini Peserta Didik diharapkan dapat: 

1) Memahami format tampilan file audio 

2) Menyajikan audio dalam tampilan web 

b. Uraian Materi 

1.) Format tampilan file audio 

Kebanyakan file audio diputar melalui sebuah plug-in, misalnya seperti 
flash. Namun, browser yang berbeda mungkin memiliki berbagai plug-in. HTML5 
mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan 
file audio pada halaman web: elemen <audio> </audio>. 

Untuk memasukkan suara pada html bisa menggunakan tag 
<audio>. Format suara yang telah didukung hingga saat ini adalah MP3, Ogg 
dan WAP. File-file Audio yang didukung PITML5 adalah MP3,WAV, dan OGG. 
Tidak semua tipe file audio tersebut didukung oleh browser. 

■ OGG merupakan format audio yang didukung oleh Mozilla firefox, opera, 
dan google chrome. 

■ MP3 merupakan format audio yang didukung oleh Google Chrome dan 
safari. 

■ WAV merupakan format audio yang didukung oleh Mozilla Firefox dan 
Opera. 

Jenis file audio untuk dukungan pada web browser bisa dilihat pada tabel berikut 
ini. 


Browser 

MP3 

Wav 

Ogg 

Internet 

Explorer 

Yes 

no 

no 

Chrome 

Yes 

yes 

yes 

Firefox 

no 

update: firefox 21 
running on Windows 

7, Windows 8, 

Windows vista, 
android now supports 
mp3 

yes 

yes 
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Safari 

yes 

yes 

no 

Opera 

no 

yes 

yes 


a. Dari tabel di atas dapat dilihat bahwa bila saat meletakan file mp3 di web 
yang kita buat, akan ada beberapa orang yang tidak bisa memutar hasil 
embed mp3 di web yan telah kita buat tersebut. Hal tersebut bisa jadi 
disebabkan browser yang digunakan tidak support pada file berekstensi 
mp3. 

b. MIME untuk format audio 

MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme 
untuk mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, 
dan lain sebagainya agar browser tidak salah menterjemahkan konten yg 
diterima. Tidak hanya pada web, email juga menggunakan MIME. Berikut adalah 
tipe mime untuk format audio. 


Format 

MIME-type 

MP3 

audio/mpeg 

Ogg 

audio/ogg 

Wav 

audio/wav 


2.) Menyajikan audio dalam tampilan web 

File audio seperti mp3 dapat dilantunkan melalui tag<audio> < /audio>. 
Berikut adalah format lengkap untuk memainkan musik ke dalam aplikasi 
web. 

<html> 

<head> 

<title>cek suara</title> 

</head> 

<body> 

<audio controls> 

<source src="house.mp3" type="audio/mp3"> 

<source src="house.ogg" type="audio/ogg"> 

</audio> 
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</body> 

</html> 


Ketika mencoba listing program diatas , file audio ditempatkan dalam satu 
folder yang sama dengan file *.htm dan nama file audio nya disesuaikan dengan 
file audio yang anda gunakan. Untuk listing program di atas menggunakan file 
audio bernama "house.mp3 " dan "house.ogg". 

Bila listing program diatas dijalankan akan menghasilkan tampilan audio di 
browser. Tekan tombol play untuk memulai menjalan audionya. 


Tombol 

play 


cek suara - Mozilla Firefox 

File Edit View History Bookmarks 

Tools Help 

L J cek suara 

L±!l 

^ f ile: ///C: /xampp/htdocs/BukuWeb/cek. htm 

fi_ Most Visited Getting Started @) 

griya dayandra | my . 




^ 1 


Gambar 12.1 tampilan audio saat dalam web 
Atribut yang digunakan pada tag <audio> </audio> dapat juga 
menggunakan atribut autoplay, loop dan Controls. Detail atribut pada audio 


adalah sebagai berikut: 


Atribut 

Sintaks 

Keterangan 

autoplay 

<audio autoplay="autoplay"> 

memulai audio secara otomatis 
pada web terbuka 

Controls 

<audio Controls = "Controls" > 

menampilkan kontrol seperti 
volume, audio, dan juga tombol 
untuk memulai/pause 

loop 

<audio loop="loop"> 

mengulang audio kembali 
setelah pemutaran awal selesai 

muted 

<audio muted - ’muted” > 

mematikan suara 

preload 

<audio preload="preload"> 

memuat ulang audio ketika 
halaman dimuat ulang 

src 

<audio> 

source 

src="/usr/home/damay/house.ogg" 

Value dari src adalah file audio 
tersebut berserta lokasi filenya 
bisa juga mengarahkan suatu 
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</audio> alamat url/web audio tertentu 

Berikut adalah listing program audio yang telah diberi atribut control, 
autoplay serta loop . Ketika listing program tersebut dijalankan maka audio akan 
berjalan secara otomatis tanpa harus ditekan tombol play . 

<html> 

<head> 

<title>cek suara</title> 

</head> 

<body> 

<audio Controls = "Controls" autoplay="autoplay" 
loop="loop" > 

<source src="house.mp3" type="audio/mp3"> 

<source src="house.ogg" type="audio/ogg"> 

</audio> 

</body> 

</html> 


Bila listing program diatas dijalankan akan menghasilkan tampilan audio di 
browser . Audio akan mulai diperdengarkan tanpa harus menekan tombol play. 
Audio akan terus dimainkan kembali ketika audio sudah habis waktunya karena 
pada atribut audio di set “loop”. 
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Gambar 12.2 tampilan audio saat dimainkan dalam web 

3.) Plug-in audio 

Plug-in merupakan sebuah program komputer kecil yang memperluas 
fungsi standar dari sebuah browser. Plug-in dapat ditambahkan ke halaman 
HTML menggunakan tag <object> atau tag <embed>. 

Tag <embed> 

Tag <embed> diartikan sebagai sebuah wadah untuk konten eksternal (non- 
HTML). Adapun potongan kode untuk memainkan file *.mp3 yang 
embed/tertanam di halaman web adalah 


<!DOCTYPE html> 

<html> 

<body> 

<embed height="50" width="100" src="house.mp3"> 

<p>Bila anda tidak dapat mendengar suara, maka kemungkinan browser yan anda 
gunakan tidak support dengan format file audionya</p> 

<p>atau bisa juga speaker anda sedang off :)</p> 

</body> 

</html> 

Setelah kode diatas dijalankan dibrowser mozilla firefox maka pada web 
akan akan muncul tampilan berikut, dan file house.mp3 tidak terdengar suaranya 
karena browser mozilla firefox tidak mendukung file audio *.mp3. 
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Bila anda tidak dapat mendengar suara, maka kemungkinan browser yan anda gunakan tidak 
support dengan format file audionya 

atau bisa juga speaker anda sedang off:) 

Gambar 12.3 tampilan audio dengan tag <embed> 

Tag <object> 

Format audio dapat pula didefiniskan sebagai obyek ekternal untuk konten 
non HTML dengan menggunakan tag<obyek>. Berikut ini potongan kode 
program untuk menampilkan file audio 

<!DOCTYPE html> 

<html> 

<body> 

<object height="50" width="100" 
data="house . ogg"x/ob j ect> 

<p>Bila anda tidak dapat mendengar suara, maka 
kemungkinan browser yan anda gunakan tidak support 
dengan format file audionya</p> 

<p>atau bisa juga speaker anda sedang off :)</p> 

</body> 

</html> 

Setelah kode diatas dijalankan dibrowser mozilla firefox maka pada web 
akan terdengar suara dari file "house.ogg" 



Bila anda tidak dapat mendengar suara, maka kemungkinan browser yan anda gunakan tidak 
support dengan format file audionya 

atau bisa juga speaker anda sedang off 


Gambar 12.4 tampilan audio dengan tag <obyek> 
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c. Rangkuman 

Dari kegiatan belajar berikut ini dapat dibuat rangkuman materi sebagai 
berikut: 

o cara standar untuk menanamkan file audio pada halaman web: elemen 
<audio> </audio>. 

o File-file Audio yang didukung HTML5 adalah MP3,WAV dan OGG. 
o Atribut Audio dituliskan dalam elemen <audio xxxxxx= “ xxxxxx” > 
o Atribut Audio yang digunakan dalam penulisan html diantaranya Controls, 
autoplay, loop, muted, preload dan src. 
o File audio dapat juga dituliskan menggunakan tag <embed> dan 
tag<object> 

d. Tugas 

Sebelum mengerjakan tugas, buatlah kelompok, terdiri atas 2-3 orang. Dalam 
kegiatan ini masing-masing kelompok kerjakan tugas berikut: 

1. Buatlah sebuah halaman web yang bisa memainkan audio secara 
otomatis namun tidak terlihat media kontrol dari audio, seperti tampilan 
dibawah ini 


1 cek suara - Mozilla Firefox 


1 File Edit View History Bookmarks Tools Help 1 

1 •_] cek suara 


1 file: ///C: /xampp/htdocs/BukuWeb/cek.htm 

1 Most Visited Getting Started @ griya dayandra | 


J 


2. Buktikan kebenaran tabel ke kompabilitasan dari format file audio 
terhadap jenis browser dengan cara mencoba macam-macam file audio 
ke dalam browser internet explorer, chrome, firefox, safari serta opera 


Browser 


MP3 

Wav 

Ogg 

Internet 

yes 


no 

no 

Explorer 





Chrome 

yes 


yes 

yes 

Firefox 

no 


yes 

yes 

Safari 

yes 


yes 

no 
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Opera no 


yes 


yes 


3. Kemudian secara bergantian masing-masing kelompok 
mempresentasikan hasilnya didepan kelas. 


e. Tes Formatif 

Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir 
soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya 
pada lembar jawaban test formatif yang telah disediakan. 

1. Bagaimanakah cara menyisipkan file audio ke dalam tampilan web 

2. Apa sajakah format file audio yang dapat disisipkan dalam tampilan 
web 

3. Sebutkan dan jelaskan atribut-atribut yang dimiliki pada penulisan 
penyisipan file audio kedalam format web 


f. Lembar Jawaban Tes Formatif 

LJ- 01 : menyisipkan file audio ke dalam tampilan web 


LJ- 02 : format file audio 
























LJ- 03 : atribut penulisan penyisipan file audio 


g. Lembar Kerja Peserta Didik 
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13. Kegiatan Belajar 13 : Format Tampilan Video dan Animasi 
a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 13 ini peserta Didik diharapkan dapat: 

1) Memahami format tampilan file video 

2) Memahami format tampilan animasi 

3) Menyajikan tampilan file video dalam tampilan web 

4) Menyajikan tampilan animasi dalam tampilan web 


b. Uraian Materi 
1) Format tampilan file Video 

Untuk menampilkan video pada halaman web dapat ditangani secara 
langsung oleh HTML5. Tag yang digunakan untuk menampilkan video adalah 
<video> </video>. Namun tidak semua format videonya dapat ditampilkan di web. 
Sementara ini, hanya beberapa format video yang bisa diproses, di antaranya 
adalah WebM ,OGG , MP4. Berikut daftar ke kompabilitasan dari masing-masing 
browser terhadap file video. 


Browser 

MP4 

WebM 

Ogg 

Internet Explorer 

Yes 

no 

no 

Chrome 

Yes 

yes 

yes 

Firefox 

no 

update: firefox 21 
running on Windows 
7, Windows 8, 
Windows vista, and 
android now 
supports mp4 

yes 

yes 

Safari 

Yes 

no 

no 

Opera 

No 

yes 

yes 


Dari tabel di atas dapat dilihat bahwa bila saat meletakan file mp4 di web 
yang kita buat, akan ada beberapa orang yang tidak bisa memutar hasil embed 
mp4 di web yan telah kita buat tersebut. Hal tersebut bisa jadi disebabkan 
browser yang digunakan tidak support pada file berekstensi mp4. 

Bila anda hendak menampilkan video pada halaman web sedangkan file 
video yang anda miliki berformat seperti *.avi, maka video dengan format *.avi 
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tersebut harus dikonversi terlebih ke format yang didukung oleh HTML5 dengan 
menggunakan program gratis atau melalui layanan situs web. 

Contoh program yang dapat mengkonversi format video adalah : 

■ Miro Video Converter dapat diunduh secara gratis atau melalui layanan 
www. microvideoconverter.com . 

■ FormatFactory di unduh gratis di http://format-factory.en.softonic.com 

■ http://video.online-convert.com -> layanan konversi secara online 

MIME untuk format Video 

MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme untuk 
mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain 
sebagainya agar browser tidak salah menterjemahkan konten yg diterima. Tidak 
hanya pada web, email juga menggunakan MIME. Berikut adalah tipe mime 
untuk format video. 


Format 

MIME-type 

MP4 

video/mp4 

WebM 

video/webm 

Ogg 

video/ogg 


2) Menyajikan file Video pada tampilan web 

File video seperti mp4 dapat dimainkan pada halaman web melalui 
tag<video> < /video>. Ketika mencoba menjalankan video pada halaman web 
, file video ditempatkan dalam satu folder yang sama dengan file *.htm dan nama 
file audio nya disesuaikan dengan file audio yang anda gunakan.Berikut adalah 
format lengkap untuk memainkan video ke dalam aplikasi web 

<html> 

<head> 

<title>cek video</title> 

</head> 

<body> 

Cvideo width="320" height="240" controls> 
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<source src="bola.mp4" type="video/mp4"> 
browser anda tidak mendukung format video ini. 
</video> 

</body> 

</html> 


Atribut Height dan Width dalam tag <video> digunakan untuk menentukan 
tinggi dan lebar penampilan video. Atribut Src menentukan file video. 

Bila listing program diatas dijalankan akan menghasilkan tampilan video di 
browser chrome . Tekan tombol play untuk memulai menjalankan videonya 



Gambar 13.1 video pada tampilan web menggunakan browser chrome 
Bila dijalankan akan menghasilkan tampilan video di browser mozilla firefox, 
video tidak akan muncul hal ini dikarenakan browser mozilla firefox tidak 
mendukung format file *.mp4. 


1 cek video - Mozilla Firefon 

mru 

File Edit View History Bookmarks Tools H< 

3lp 

cek video ^ + 

file: ///C: /xampp/htdocs/BukuWeb/cek. htm 

P Most Visited J Getting Started griya dayandra | my ... 
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Gambar 13.2 video pada tampilan web menggunakan browser mozilla firefox 


Tag <video> memiliki beberapa atribut, tidak hanya width dan height saja. 
Kontrol atribut menambahkan kontrol video, seperti play, pause, dan volume. 
Berikut ini adalah atribut - atribut yang digunakan pada tag <video>. 


Atribut 

Sintaks 

Deskripsi 

autoplay 

cvideo autoplay="autoplay"> 

Memulai secara otomatis video 

Controls 

cvideo Controls = "Controls" > 
Atau juga bisa ditulis 
cvideo controls> 

menampilkan tombol kontrol 

video 

height 

cvideo height="240"> 

mengatur tinggi frame video 

width 

cvideo width="320"> 

mengatur lebar frame video 

loop 

cvideo loop="loop"> 

Memutar video secara berulang- 

ulang 

muted 

cvideo muted="muted"> 

mematikan fungsi suara pada 

video 

poster 

cvideo poster="anak.gif"> 

memunculkan poster/gambar 

pada saat video buffer atau 

diunduh. 

preload 

cvideo preload="preload"> 

memuat ulang video 

src 

csource src="bola.mp4" 
type="video/mp4"> 

memberikan link video 


Poster 

Atribute poster berfungsi untuk memunculkan poster/gambar pada saat video 
buffer atau diunduh. Misalnya saat buffer video akan muncul gambar “anak.gif” 
maka dalam tak <video> disisipkan atribut poster-’anak.gif” dengan catatan file 
anak.gif diletakan dalam folder yang sama dengan file html nya. 
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Gambar 13.3 anak.gif gambar yang akan disisipkan sebagai poster 


Berikut adalah potongan kode yang menggunakan atribut poster 

<html> 

<head> 

<title>cek video</title> 

</head> 

<body> 

<video width="320" height="240" Controls 
poster="anak.gif"> 

<source src="bola.mp4" type="video/mp4"> 
browser anda tidak mendukung format video ini. 
</video> 

</body> 

</html> 


Ketika kode program di atas dijalankan maka akan menghasilka tampilan web 
seperti berikut ini 
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fa cek video tlMHH 

<- C ! D file:///C:/xampp/htdocs/BukuWeb/cek.htm 



Gambar 13.4 Tampilan video menggunakan atribut poster-’anak.gif” 

SRC 

Source atau src digunakan disini sama halnya untuk keperluan video dan 
audio, hanya saja pada <source> akan menggunakan 2 sumber dimana file 
tersebut memiliki isi yang sama tetapi format yang berbeda. Tujuannya disini 
adalah web browser akan memilih memutar yang mana nantinya sesuai dengan 
format yang didukung oleh web browser tersebut .Dapat dilihat pada potongan 
kode berikut: 

<html> 

<head> 

<title>cek video</title> 

</head> 

<body> 

Cvideo width="320" height="240" controls> 

<source src="bola.mp4" type="video/mp4"> 

<source src="bola.ogg" type="video/ogg"> 

<source src="bola.WebM " type="video/WebM"> 
browser anda tidak mendukung format video ini. 

</video> 

</body> 

</html> 
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4.) Menyajikan animasi pada tampilan web 

File animasi juga dapat ditampilkan pada halaman web dengan cara di 
embed-kan. Embed digunakan untuk melampirkan file dari eksternal seperti 
*.swf dan lain-lain sebagainya. Perintah yang digunakan adalah 
<embed src="siboy.swf"> 

Untuk penulisan kode embed selengkapnya adalah sebagai berikut ini. 

<html> 

<head> 

<title>animasi</title> 

</head> 

<body> 

<embed src="siboy.swf"> 

<p></p><—file animasi flash siboy. swf--x/p> 

</body> 

</html> 


Bila kode program diatas dijalankan maka akan muncul file animasi 
“siboy.swf” pada halaman web. 
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’ animasi - Mozilla FirefoK 


File Edit View History Bookmarks Tools Help 


animasi 


file: ///C: /xampp/htdocs/Buku Web/cek. htm 
£> Most Visited Getting Started (y) griya dayandra | 




<—file animasi flash siboy. swf—> 

Gambar 13.5 animasi siboy.swf pada halaman web 
Pada halaman web selain animasi dalam bentuk *.swf dengan menggunakan 
perintah < embed> dapat juga menampilkan animasi dalam bentuk *.gif. Hal ini dapat 
dilihat pada potongan kode berikut dimana file rose.gif merupakan gambar bergerak 
(animasi) 

<html> 

<head> 

<title>animasi</title> 

</head> 

<body> 

<embed src="rose.gif"> 

</body> 

</html> 


Saat kode program diatas dijalankan maka animasi akan muncul 
dihalama web seperti terlihat pada gambar berikut 
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\ WV 

File Edit View History Bookmarks Tools Help 

File Edit View History Bookmarks Tools Help 

[. J animasi + 

[ 1 animasi 

f ile: ///C: /xampp/htdocs/BukuWeb/cek. htm 

^ f ile: ///C: /xampp/htdocs/Buku Web/cek. htm 

\P Most Visited Getting Started (2) griya dayandra ^ 

P Most Visited Getting 5tarted griya dayandra 




Gambar 13.6 animasi rose.gif pada halaman web 
Untuk attribut penggunaan embed bisa ditambahkan pada tag tersebut 
attribut seperti pada tabel berikut ini. 


Atribut 

Nilai 

Keterangan 

height 

pixels 

mendefenisikan ukuran tinggi trame 

media. 

src 

URL 

memberikan sumber media yang 

dilampirkan 

type 

MIME_type 

menspesifikasikan tipe dari MIME 

width 

pixels 

mengatur lebar dari frame media pada 

saat program dijalankan di browser. 


c. Rangkuman 

o cara standar untuk menanamkan file audio pada halaman web: elemen 
<video> </video>. 

o File-file video yang didukung FITML5 adalah MP4,WebM dan OGG. 
o Atribut video dituliskan dalam elemen <video xxxxxx= “ xxxxxx” > 
o Atribut Audio yang digunakan dalam penulisan html diantaranya autoplay, 
Controls, height, width, loop, muted,poster, preload, src. 
o Animasi dapat ditampilkan dalam web dengan menuliskan <embed 
src="file.swf"> 

o File animasi berupa *.swf dan *.gif dapat ditampilkan pada halaman web. 


d. Tugas 

Sebelum mengerjakan tugas, buatlah kelompok, terdiri atas 2-3 orang. Dalam 
kegiatan ini masing-masing kelompok kerjakan tugas berikut: 
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1. Buatlah sebuah halaman web yang bisa memainkan video secara 
otomatis namun tidak terlihat media kontrol dari videonya 


2. Buktikan kebenaran tabel ke kompabilitasan dari format file video 
terhadap jenis browser dengan cara mencoba macam-macam file video 
ke dalam browser internet explorer, chrome, firefox, safari serta opera 


Browser 

MP4 

WebM 

Ogg 

Internet Explorer 

Yes 

no 

no 

Chrome 

Yes 

yes 

yes 

Firefox 

No 

yes 

yes 

Safari 

Yes 

no 

no 

Opera 

No 

yes 

yes 


3. Kemudian secara bergantian masing-masing kelompok 

mempresentasikan hasilnya didepan kelas. 

e. Tes Formatif 

Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir 
soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya 
pada lembar jawaban test formatif yang telah disediakan. 

1. Bagaimanakah cara menyisipkan file video ke dalam tampilan web 

2. Apa sajakah format file video yang dapat disispkan dalam tampilan 
web 

3. Sebutkan dan jelaskan atribut-atribut yang dimiliki pada penulisan 
penyisipan file audio kedalam format web 

4. Bagaimanakah cara menyisipkan file animasi ke dalam tampilan web 

5. Apa sajakah format file animasi yang dapat disispkan dalam tampilan 
web 

6. Sebutkan dan jelaskan atribut-atribut yang dimiliki pada penulisan 
penyisipan file animasi kedalam format web 


f. Lembar Jawaban Tes Formatif 

LJ- 01 : menyisipkan file video 
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LJ- 02 : format file video 


LJ- 03 : atribut format file video 


LJ- 04 : menyisipkan file animasi 
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LJ- 05 : format file animasi 


LJ- 06 : atribut format file animasi 





























g. Lembar Kerja Peserta Didik 
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14. Kegiatan Belajar 14 : Format Tampilan Gambar dengan Map 

a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 14 ini Peserta Didik diharapkan dapat: 

1) Memahami format tampilan gambar dengan map 

2) Menyajikan tampilan gambar dengan map 

b. Uraian Materi 

Format gambar yang ditambahkan dalam dokumen HTML, diantaranya 
dalam format GIF, JPEG, PNG. Untuk menambahkan gambar kedalam 
dokumen HTML digunakan tag <IMG> dengan dilengkapi atribut img. Atribut tag 
<img> yang sering digunakan diantaranya src, align, width, height, alt dan 
penulisan skrip secara umum adalah sebagai berikut: 


<IMG SRC = "directori gambar / nama gambar" atribute="nilai atribut"> 

Gambar dengan map memungkinkan untuk memasang beberapa link dalam 
satu gambar. Hal tersebut memudahkan kita dalam memanggil sebuah halaman 
web dengan hanya menempatkan sekelompok gambar menjadi satu gambar. 
Untuk membuat image map, harus ditambahkan atribut USEMAP pada tag 
image. 

<IMG SRC = "directori gambar / nama gambar" usemap="#planetmap"> 

Tampilan gambar dengan map merupakan suatu area pada gambar /image 
yang dapat diberi hyperlink area yang biasanya disebut "hotspots”. Koordinatnya 
gambar ditentukan menggunakan bidang geometri seperti rectangle, polygon dan 
lain sebagainya. Map sendiri dapat diartikan sebagai peta. Untuk membuat 
image map digunakan tag <map> dan <area>. 

Perintah <map> dapat didukung oleh pelbagai browser, diantaranya 
internet explorer, mozilla firefox, opera, google chrome maupun safari. 

Browser Support 

< 3 ^ 00 ® . 

Gambar 14.1 browser yan mendukung tag <map> 
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Tag <map> digunakan untuk mendefinisikan sebuah tampilan gambar 
map pada sisi client-side. Sebuah gambar map adalah gambar merupakan area 
yang dapat diklik. Nama dari gambar yang dibutuhkan pada penulisan atribut 
pada tag <map>.Hal ini dikaitkan dengan <img> usemap atribut dan menciptakan 
hubungan antara gambar dan map nya. Bagian dari tag <map> berisi sejumlah 
elemen <area>, yang mendefinisikan suatu lokasi/daerah saat diklik di gambar 
map dapat menghubungkan ke gambar lainnya yang sudah ditentukan. 

Format penulisan gambar map 

Penulisan skript secara umum adalah sebagai berikut: 


<map name ="nama map"> 

<area shape = "type" coords="value" href="link"> 

</map> 

Keterangan: 

Nama map -> nama dari map yang nantinya akan dipanggil oleh cimage 
usemap> 

Area shape -> jenis shape yang digunakan untuk menggambarkan area dari 
gambar map. Adapun jenis shape map yan dapat digunakan 
adalah 


Tipe Shape 

Keterangan 

Default 

Semua area image 

Rect 

Area kotak tertentu 

Poly 

Area poligon 

Circle 

Area lingkaran tertentu 


Aturan untuk menuliskan nilai untuk menentukan koordinat pada image 
yang berguna sebagai area hyperlink dapat dilihat pada daftar tabel di bawah ini 


Tipe Shape 

Keterangan 

Rect 

left-x, top-y, right-x, bottom-y 

Circle 

center-x, center-y, radius 

Poly 

x1, yl, x2, y2, ...xn, yn. 
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Berikut adalah contoh penulisan kode program untuk menampilkan 
gambar map, dimana tag<area> menggunakan atribut shape 
( http://www.w3schools.com/taqs/trvit.asp?filename=tryhtml areamap) . 

<html> 

<body> 

<p>Klik gambar matahari atau salah satu planet yang 
terlihat lebih detail</p> 

<img src="planets.gif" width="145" height="126" 
alt="Planets" usemap="#planetmap"> 

<map name="planetmap"> 

<area shape="rect" coords="0,0,82,126" alt="Sun" 
href="sun.htm"> 

<area shape="circle" coords="90,58,3" alt="Mercury" 
href="mercur.htm"> 

<area shape="circle" coords="124,58,8" alt="Venus" 
href="venus.htm"> 

</map> 

</body> 

</html> 


Pada kode program untuk menampilkan gambar dengan map 

■ <img src="planets.gif"> menampilkan gambar “planets.gif” 

■ <map memberi nama map=planetmap untuk 

name="planetmap"> kemudian planetmap tersebut dipanggil oleh 

tag<img usemap=”#planetmap”> untuk 
ditampilkan pada halaman web sebagai 
gambar map. 

■ <area shape= n rect" Penentuan area map dan koordinat area 

coords=" 0 , 0 , 82 , 126 " 
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Bila kode program diatas dijalankan maka pada browser akan muncul 
gambar seperti dibawah ini. Gambar akan menampilkan gambar matahari 
beserta 2 planet disekitarnya. Bila diklik misalnya planet A maka akan muncul 
gambar D yang merupakan gambar detail planet A. 


Klik gambar matahari atau salah satu planet yang terlihat lebih detail 



Gambar 14.2 tampilan gambar dengan map 


Pada HTML 5 ada beberapa atribut baru dan ada pula atribut HTML4.01 yang 
tidak berlaku pada HTML 5. Berikut adalah daftar atribut yang berhubungan 
dengan gambar map 


Atribut 

Nilai 

Keterangan 

alt 

Berupa teks, misal 
Alt=”planet” 

Aternatif teks tertentu untuk menunjukan 
href 

coords 

Titik koordinat 

coords="0,0,82,126" 

Berisi nilai koordinat dari shape/bentuk 
area yang ditentukan 

download 

Nama file 

Hyperlink dari target untuk download 

Ini baru di HTML 5 

href 

URL 

Target hyperlink untuk area 

hreflana 

language_code 

Bahasa tertentu dari target URL 

Ini baru di HTML 5 

mediaNew 

media query 

Media/perangkat tertentu untuk target URL 
baru di HTML 5 

nohref 

value 

Tidak didukung dalam HTML5. 

rel 

alternate 

baru di HTML 5 
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author 

bookmark 

help 

license 

next 

nofollow 

noreferrer 

prefetch 

prev 

search 

tag 

hubungan tertentu antara dokumen yang 
sedang aktif dengan target URL 

shape 

default 

Shape/bentuk yang digunakan sebagai 


rect 

circle 

poly 

area 

taraet 

_blank 

_parent 

_self 

Jop 

framename 

Target URI 

tvoe 

MIME_type 

Tipe MIME sebagai target URL 
baru di HTML 5 


c. Rangkuman 

Dari kegiatan belajar ini dapat dibuat rangkuman materi sebagai berikut: 

o Untuk menambahkan gambar kedalam dokumen HTML digunakan tag 
<IMG> 

o Untuk membuat image map, harus menambahkan atribut USEMAP pada 
tag image. <IMG SRC = "directori gambar / nama gambar" 
usemap="#planetmap"> 

o Untuk membuat image map digunakan tag <map> dan <area>. 

o Tag <map> digunakan untuk mendefinisikan sebuah tampilan gambar 
map pada sisi client-side 

o Bagian dari tag <map> berisi sejumlah elemen <area> 

o Format penulisan gambar map 
<map name ="nama map"> 
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<area shape = "type" coords="value" href="link"> 

</map> 

o Area shape merupakan jenis shape yang digunakan untuk 
menggambarkan area dari gambar map. 
o Area shape yang digunakan pada map Default, Rect, Poly, Circle 
o Atribut yang digunakan pada tag <area> diantaranya alt, coords, 
download, href, hreflang, media , nohref , rel, shape , target, type 


d. Tugas 

Sebelum mengerjakan tugas, buatlah kelompok, terdiri atas 2-3 orang. Dalam 
kegiatan ini masing-masing kelompok kerjakan tugas berikut: 

1. Buatlah tampilan gambar dengan map seperti contoh berikut 


No. 


Tampilan awal gambar map 


4 Hewan dalam kandang 



Gambar detail gambar map 


ayam 




Kambing 



Kucing 
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2. Kemudian secara bergantian masing-masing kelompok 
mempresentasikan hasilnya didepan kelas. 


170 | P a g e 











e. Tes Formatif 

Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir 
soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya 
pada lembar jawaban test formatif yang telah disediakan. 

1. Apakah yang dimaksud dengan gambar map ? 

2. Tulisankan listing kode utama untuk menampilkan sebuah map 

3. Sebutkan jenis shape yang dapat digunakan sebagai target area dari map 

4. Sebutkan dan jelaskan sedikitnya 5 atribut yang digunakan dalam tag 
<area> 

5. Apa arti dari penggalan listing kode program berikut 


<img src="planets.gif" 

width="145" 

height="126" 

alt="Planets" 

usemap="#planetmap"> 





f. Lembar Jawaban Tes Formatif 

LJ- 01 : gambar map 


LJ- 02 : listing kode utama untuk menampilkan sebuah map 


LJ- 03 : jenis shape pada tag <area> 
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LJ- 04 : 5 atribut dalam tag <area> 


LJ-05 : arti dari kode 


<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> 


g. Lembar Kerja Peserta Didik 
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15. Kegiatan Belajar 15 : Menyajikan Hyperlink 

a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 15 ini Peserta Didik diharapkan dapat: 

1) Memahami Anatomi hyperlink 

2) Menyajikan hyperlink 

b. Uraian Materi 

1) Anatomi hyperlink 

Salah satu kelebihan dokumen HTML adalah memiliki kemampuan untuk saling 
terkait dengan dokumen lain. Link (sebutan singkat dari hyperlink text) adalah 
suatu metode yang digunakan dalam HTML untuk membuat hubungan antar 
halaman yang terdapat dalam satu situs web. Semua halaman web yang ada di 
internet hampir bisa dipastikan memiliki link. Secara umum, fungsi link adalah 
untuk memudahkan pengunjung web dalam menulusuri/menjelajahi seluruh isi 
atau informasi yang tersimpan dalam situs web bersangkutan. 

Dalam keadaan default (normal), suatu link akan ditandari dengan teks berwarna 
biru yang memiliki garis bawah. Meskipun demikian, kita dapat mengubah warna 
dan gaya link sesuai dengan kebutuhan dan keinginan kita melalui pembuatan 
kode CSS.jika kita mengarahkan kursor ke suatu link tertentu, maka penunjuk 
mouse akan berubah menjadi gambar tangan dengan satu jari yang sedang 
menunjuk, seperti yang ditunjukkan oleh gambar di bawah ini. 


Contoh link 



Konsep atau cara kerja link dalam HTML dapat diilustrasikan melalui gambar 
berikut: 
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Halaman 1 



Gambar 15.1. Konsep atau cara kerja link dalam HTML 

Pada gambar diatas, masing-masing halaman memiliki keterkaitan satu 
sama lain. Artinya, masing-masing halaman tersebut dapat dipanggil atau 
ditampilkan dari halaman manapun. Hal ini bisa terjadi jika setiap halaman di atas 
memiliki link. 

Mengenal Tag <a> (anchor) 

Untuk membuat suatu link, HTML menyediakan satu tag khusus, yaitu tag <a>, 
yang berpasangan dengan </a>. Setiap teks yang diapit oleh tag ini akan 
ditampilkan sebagai link. Bentuk umum pembuat link dalam dokumen HTML 
adalah sebagai berikut: 

<a href="DokumenLain">Teks Link</a> 

Atribut HREF dalam tag <a> berfungsi untuk menentukan dokumen atau 
halaman mana yang akan dipanggil saat link tersebut di klik atau dipilih oleh 
pengunjung web. 

Contoh : 


<a href="index.html">Home</a><br /> 

<a href="about. html">Tentang Kami</aXbr /> 
<a href="contact.html">Kontak</a> 


Pada contoh diatas kita membuat tiga buah link dengan teks : Home . Tentang 

kami , dan kontak . Ketika pengunjung melakukan klik terhadap link pertama 
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(home), web browser akan menampilkan dokumen yang disimpan dalam file 
index.html. Begitu juga dengan link kedua ( Tentang Kami ) dan ketiga ( Kontak) , 
setiap di klik akan menjadikan web browser menampilkan dokumen yang 
terdapat pada file about.html dan contact.html. 

Berikut ini ada beberapa hal yang perlu diperhatikan dalam pemberian nama 
dokumen web, agar link dapat berfungsi dengan baik : 

• Penamaan file dengan huruf kecil semua 

• Jangan ada spasi serta hindari non-karakter alphabet 

c. Rangkuman 

Dari kegiatan belajar diatas dapat dibuat rangkuman materi seperti berikut 

■ Link (sebutan singkat dari hyperlink text) adalah suatu metode yang 
digunakan dalam HTML untuk membuat hubungan antar halaman yang 
terdapat dalam satu situs web. 

■ Tag untuk membuat link adalah <a href=””>, dimana atribut href=”” berisi 
URL atau alamat dari halaman yang akan dituju. 

d. Tugas 

^ Buatlah dokumen HTML berikut: 

<html> 

<head> 

<title>Link</title> 

</head> 

<body> 

<h2>Latihan Membuat Link</h2> 

<h3><u>Dokumen l</u></h3> 

<p>Klik link di bawah ini untuk melihat isi halaman 
web pada dokumen2.html:</p> 

<p><a href= ,, link-dokumen2 .html">Lihat Dokumen 
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2</a></p> 

</body> 

</html> 

S Simpan file dengan nama link-dokumen1.html dan tempatkan ke dalam 
direktori kerja. 

^ Buatlah file baru, lalu buatlah dokumen HTML berikut: 

<html> 

<head> 

<title>Link</title> 

</head> 

<body> 

<h2>Latihan Membuat Link</h2> 

<h3><u>Dokumen 2</u></h3> 

<p> 

Ini adalah isi halaman yang terdapat pada dokumen 2. 
Untuk kembali ke dokumen 1, silahkan klik link di 
bawah ini. 

</p> 

<p> 

<a href="link-dokumenl.html">Lihat Dokumen l</a> 

</p> 

</body> 

</html> 


'k Bukalah file link-dokumen1.html melalui web browser 

'k Klik link yang ada pada dokumenl. Apa yang kamu lihat ? halaman web akan 
berpindah ke dokumen 2 bukan ? 

'k Klik link yang ada pada dokumen 2. Kali ini, kamu akan melihat kembali isi 
halaman dari dokumenl. 
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e. Tes Formatif 

1. Apa tag untuk membuat link dokumen web? 

2. Apa yang diisikan pada atribut href=”...” ? 

3. Tulislah tag yang menyajikan hyperlink ke dokumen-dokumen berikut: 

a. profile2.html 

b. staf/guru.html 

c. www.google.com 

d. profile.doc 

4. Untuk soal 3.a) ternyata nama file yang dituju adalah “profile 2.html”, jadi ada 
spasi sebelum 2, apa yang terjadi? Apakah dokumen tetap dapat dibuka? 

5. Untuk soal 3.d) apa yang terjadi jika ada file profile.doc? 

f. Lembar Jawaban Tes Formatif 

LJ- 01 : Tag untuk membuat link dokumen web 


LJ- 02 : Isi dari atribut href= 


LJ- 03 : Penulisan tag hyperlink-nya sebagai berikut:: 
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LJ- 04 : Adapun hasilnya sbb : 


LJ- 05 : Adapun hasilnya sbb : 


g. Lembar Kerja Peserta Didik 
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16. Kegiatan Belajar 16 : Jenis - Jenis Link dalam HTML 

a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 16 ini Peserta Didik diharapkan dapat: 

1) Memahami jenis-jenis link dalam HTML 

2) Menyajikan jenis-jenis link dalam HTML 

b. Uraian Materi 

1) Jenis-jenis Link dalam HTML 

Dalam HTML, link dibedakan menjadi 3 jenis, yaitu : 

• Link absolut 

• Link relatif 

• Link ke bagian dokumen tertentu 

HTML membedakan ketiga jenis link diatas berdasarkan lokasi atau alamat 
dokumen yang akan diakses. Dengan demikian, perbedaannya hanya terletak 
pada nilai atribut HREF-nya saja. 

Link Absolut 

Link Absolut adalah link yang akan menunjuk ke halaman dari situs web lain. 
Penulisan alamatnya pun harus ditulis secara lengkap. Sebagai contoh, jika tema 
atau isi dari situs web yang kita buat adalah pemrograman HTML, maka kita 
dapat membuat link ke situs web lain yang memiliki tema yang sama atau 
relevan. Tujuannya adalah agar pengunjung bisa memperoleh informasi lebih 
tentang tema tersebut yang ‘mungkin’ tidak/belum kita bahas pada situs web kita. 

Contoh : 


<a href=http://www.w3.org/>W3</a> 

Pada contoh diatas, tujuan link yang dibuat akan mengarah ke situs web 
http://www.w3.org/ 
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Link Relatif 

Link Relatif adalah link yang tujuannya mengarah ke dokumen-dokumen lain 
yang masih berada di dalam satu situs web yang sama (komputer yang sama). 
Penulisan alamat tujuannya pun tidak perlu ditulis secara lengkap, cukup nama 
dokumennya saja, dan nama direktorinya (jika ada). 

Perhatikan contoh kode berikut: 


<a href="kontak.html">Kontak</a> 

<a href="images/jeep/sahara.jpg">Lihat Foto Jeep Wrangler 
Sahara</a> 


Tidak perlu ditulis lengkap seperti berikut: 

<a href=http://www.situskita.com/kontak.html>Kontak</a> 

<a href=http://www.situskita.com/images/jeep/sahara.jpg> 
Lihat Foto Jeep Wrangler Sahara</a> 


Kita tidak perlu menulis alamat secara lengkap karena server web akan mencari 
file kantak.html dan sahara.jpg di Computer yang sama, jika halaman utama dari 
situs web yang akan kita buat adalah index. html, maka file kontak, html harus di 
tempatkan di dalam direktori yang sama dengan file index.html ; sedangkan 
sahara.jpg harus berada di dalam direktori images\jeep. Jika digambarkan, 
struktur di rektori dan file-nya akan tampak sebagai berikut: 
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Link ke Bagian Dokumen tertentu 

Materi ini akan dibahas pada Kegiatan Belajar berikutnya. 

Menjadikan Gambar sebagai Link 

Selain link berupa teks, gambar juga dapat dijadikan sebagai link. Konsepnya 
sebenarnya sama saja dengan link berupa teks, perbedaannya hanya perlu 
mengganti teks yang dijadikan sebagai link dengan tag <img>. 

Link yang berupa teks: 

<a href="dokumenlain">teks link</a> 

Link yang berupa gambar: 

<a href="dokumenlain"Ximg src="NamaFileGambar" /></a> 

Contoh : 

<a href="detail-sahara.html"> 

<img src="images/jeep/saharal.jpg" /> 

</a> 
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Pada contoh di atas kita menjadikan gambar sahara1.jpg yang tersimpan di 
dalam direktori images\jeep sebagai link untuk menuju ke dokumen detail- 
sahara.html. 

c. Rangkuman 

Dari kegiatan belajar ini dapat dibuat rangkuman sebagai berikut: 

■ HTML tag <a> mendefinisikan hyperlink. 

■ Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang 
dapat diklik untuk menuju ke dokumen lain. 

■ Untuk memindahkan kursor di atas link di halaman Web, panah akan 
berubah menjadi tangan kecil. 

■ Atribut yang paling penting dari elemen <a> adalah atribut href, yang 
menunjukkan tujuan link. 

■ Jenis-jenis link dalam HTML, yaitu: 

Link absolut adalah link yang akan menunjuk ke halaman dari situs web 
lain 

Link relative adalah link ke dokumen internal, dan penulisan alamat 
tujuannya pun tidak perlu ditulis secara lengkap, cukup nama 
dokumennya saja, dan nama direktorinya 
Link ke bagian dokumen tertentu atau internal link 

■ HTML membedakan ketiga jenis link diatas berdasarkan lokasi atau alamat 
dokumen yang akan diakses 

d. Tugas 
Link 

■S Buat direktori baru dengan nama jeep di dalam direktori images 
■S Copy file gambar yang akan digunakan ke dalam direktori image\jeep 
Catatan: dalam contoh ini menggunakan file gambar dengan nama sahara.jpg 

'S Buatlah dua dokumen HTML berikut: 
index.html 

<html> 

<head> 
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<title> link< / title> 

</head> 

<body> 

<h2> Latihan Membuat link relatif</h2> 

<p>Di jual Jeep Wrangler Sahara ( DIJAMIN PUAS ! ) :</p> 

<P> 

Tahun : 2011 <br /> 

Harga : Rp 975.000.000, - (NEGO) <br /> 

<P> 

<a href= "images/jeep/sahara.jpg"> Lihat foto. mobil</a> 
<br /> 

Untuk peminat serius, silahkan 
<a href= "kontak.html">hubungi kami</a> 

</body> 

</html> 



kontak.html 

<html> 

<head> 

<title>link</title> 

</head> 

<body> 

<h2>Latihan membuat link relatif</h2> 

<p>Untuk peminat serius, silahkan hubungi kami di : </p> 
<strong>Auto Jeep Perkasa Showroom</strongXbr /> 

Jl. Garuda Sakti no. 13 Bandungkbr /> 
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(022) 999-00333 

</p> 

<p><a href= "index.html"> kembali ke halaman utama</a></p> 
</boby> 

</html> 


'k Tempatkan ke dalam direktori kerja 

^ Jalankan file index.html melalui web brower 

'k Coba buka file index.html dan bagaimana link yang terjadi? 

Link Gambar 

'k Copy file gambar yang akan digunakan ke dalam direktori images\jeep 
Catatan : dalam contoh ini mengunakan file sahara.jpg 
'k Jalankan aplikasi text editor 

'k Buatlah dua file baru sebagai dokumen HTML berikut: 

link-sambar .html 

<html> 

<head> 

<tittle>Link</title> 

</head> 

<body> 

<h2>Latihan Membuat Link Berupa gambar</h2> 

<p>Klik gambar dibawah ini untuk melihat 
informasi detail:</p> 

<a href="detail-sahara.html"> 

<img src="images/jeep/saharal.jpg" /> 
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</a> 

</body> 

</html> 


detail-sahara.html 

<html> 

<head> 

<title>link</title> 

</head> 

<body> 

<h2>Latihan Membuat Link Berupa Gambar</h2> 

<P> 

<img src="images/jeep/saharal.jpg"align="left"/> 
Merk: <strong>jeep</strong><br /> 

Seri: <strong>Wrangler</strong><br /> 

Tipe: <strong>Unlimited Sahara</strongXbr /> 
Tahun: Pembuatan: 2011<br /> 

Transmisi: Automatic<br /> 

Silinder: 3.700<br /> 

Kilometer: 0 km (baru) <br /> 

Harga: Rp 975.000.00,- <br /> 

Keterangan tambahan: Mewah dan Gagah (Ready Stock) 
<p/> 

<P> 
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<a href="link-gambar.html"> Kembali ke halaman utama<a/> 
<p/> 

</body> 

</html> 


S Tempatkan kedua file tersebut ke dalam direktori kerja 

^ Bukalah file link-gambar.html melalui web browser 

Pada latihan di atas kita menggunakan gambar sebagai link untuk menuju atau 
mengarah ke halaman web lain. Untuk mengetahui cara kerjanya, coba klik 
gambar di atas! 

Klik link Kembali ke halaman utama untuk mengarah ke halaman web semula 

e. Tes Formatif 

1. Sebutkan jenis-jenis link dalam dokumen HTML 

2. Bagian apa yang penting dalam tag link? 

3. Bagaimana cara menjadikan gambar sebagai link? Berikan contohnya! 

4. Jelaskan beberapa tag link berikut ini : 

a. <a href="info.html">lnformasi Lengkap</a> 

b. <a href="www.kemdikbud.go.id">Kementerian Pendidikan dan 
Kebudayaan</a> 

f. Lembar Jawaban Tes Formatif 

LJ- 01 : Jenis-jenis link dalam dokumen HTML 
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LJ- 02 : Hal penting dalam tag link 


LJ- 03 : Cara menjadikan gambar sebagai link 


LJ- 04 : Penjelasan : 

































g. Lembar Kerja Peserta Didik 
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17. Kegiatan Belajar 17 : Menyajikan Link ke Bagian Dokumen 
HTML 


a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 17 ini Peserta Didik diharapkan dapat: 

1) Memahami jenis-jenis link ke Bagian Dokumen HTML 

2) Menyajikan link ke Bagian Dokumen HTML 


b. Uraian Materi 

Link ke Bagian Dokumen Tertentu 

Link dapat berperan untuk mengarahkan ke bagian teks atau gambar tertentu 
yang masih berada dalam satu dokumen yang sama. Link seperti ini biasanya 
pada halaman web yang memiliki informasi yang panjang atau pada dokumen 
yang memiliki daftar isi di bagian atasnya. Tujuannya adalah agar para 
pengunjung tidak perlu melakukan scrolling pada halaman tersebut untuk 
menuju/kembali tertentu dalam dokumen bersangkutan. 


Sapat juga membuat link internal dalam suatu halaman - misalnya daftar isi di 
atas dengan link ke setiap bab . Yang perlu digunakan adalah atribut yang 
disebut id (identifikasi) dan simbol “#”. 

Gunakan atribut id untuk menandai elemen yang ingin ditautkan/link. Sebagai 
contoh: 


<hl id="headingl">heading l</hl> 


Sekarang kita dapat membuat link ke elemen dengan menggunakan ”#” di atribut 
link. Tanda “#” harus diikuti dengan id dari tag yang ingin ditautkan/link. Sebagai 
contoh: 


<a href="#headingl"> Menuju ke heading l</a> 

Berikut ini contoh bila ada beberapa link internal 

<html> 

<head> </head> 

<body> 

<a href="#headingl">Link ke heading l</a> 
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<a href="#heading2">Link ke heading 2</a> 

<hl id="headingl">heading l</hl> 

<hl id="heading2">heading 2</hl> 

</body> 

</html> 

Link ke bagian dokumen tertentu dapat di bedakan lagi menjadi dua jenis, yaitu : 

• Link ke bagian tertentu dalam dokumen yang sama 

• Link ke bagian tertentu dalam dokumen lain 

Link ke Bagian Tertentu dalam Dokumen yang sama 

Untuk membuat link semacam ini, terlebih dahulu kita perlu memberikan id atau 
nama pada bagian teks atau gambar tertentu sebagai bagian yang akan dituju. 
Pemberian id tersebut dilakukan dengan cara menuliskan kode berikut: 

<a id="tujuanLink">Teks atau gambar</a> 

Selanjutnya untuk membuat link yang akan mengarah ke teks atau gambar yang 
telah di namai tersebut adalah dengan menuliskan kode seperti berikut: 

<a href=”#Tujuanlink”>Teks atau gambar</a> 

Tanda # di atas menunjukan bahwa tujuan link adalah nama bagian, bukan 
berupa file. 

Link ke Bagian Tertentu Dalam Dokumen Lain 

Selain bagian yang berada dalam satu dokumen, link dapat juga mengarah ke 
sesuatu bagian tertentu yang terdapat dalam dokumen lain. Untuk membuat link 
semacam ini, bagian tertentu dalam dokumen lain tersebut harus di tantai 
dengan pemberian id seperti pada sub-bab sebelumnya. Perbedaan hanya 
terletak pada penulisan tujuan link-nya saja. Pada kasus seperti ini, kita perlu 
menambahkan id bagian pada tujuan link, seperti berikut: 

<a href="namafile#idBagian">Teks atau gambar</a> 

c. Rangkuman 

Dari kegiatan belajar ini dapat dibuat rangkuman materi sebagai berikut: 

■ Link dapat dibuat ke bagian teks atau gambar tertentu yang masih berada 
dalam satu dokumen yang sama. Link seperti ini biasanya pada halaman 
web yang memiliki informasi yang panjang atau pada dokumen yang 
memiliki daftar isi di bagian atasnya. Tujuannya adalah agar para 
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pengunjung tidak perlu melakukan scrolling pada halaman tersebut untuk 
menuju/kembali tertentu dalam dokumen bersangkutan 

■ Caranya adalah memberikan nama atau id pada bagian teks atau gambar 
tertentu sebagai bagian yang akan dituju. Yang perlu digunakan adalah 
atribut yang disebut id (identifikasi) dan simbol Gunakan tag: <a id= “ 
tujuanLink”>Teks atau gambar</a> 

■ Kemudian untuk tag link dengan cara : <a href= “#Tujuanlink”>Teks atau 
gambar</a> 

d. Tugas 

Membuat link ke bagian tertentu dalam satu Dokumen 

^ Buatlah dokumen html dengan kode berikut: 

<html> 

<head> 

<title>link>/title> 

</head> 

<body> 

<h2>Latihan membuat ke bagian tertentu dalam satu dokumen</h2> 

<a id= "atas"x/a> 

<p> pilih salah satu judul buku berikut untuk melihat deskripsi: </p> 

<a href="#c"> pemrograman C</axbr /> 

<a href="#cpp"> pemrograman C++</axbr /> 

<a href="#bcb"> pemrogaraman Borland C++Builder</a> 

</p> 

<pxa id="c"xstrong>pemrograman C</strong> </ax/p> 

<P> 

C merupakan bahasa pemrograman yang sudah tidak digunakan lagi kehandalannya dan 
banyak digunakan untuk membuat program-progarm dalam berbagai bidang, termasuk 
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pembuatan kompilator (compiler) dan sistem operasi. Sampai saat ini, C masih tetap 
menjadi bahasa populer dan beribawah dalam kanca pemrograman. Sejauh ini, C juga 
telah menjadi inspirasi bagi kelahiran bahasa-bahasa pemrograman baru, seperti C++, 
java, dan juga yang lainnya ; sehingga dari sisi sintak kontrol programnya, ketika bahasa 
ini bisa dikatakan sama. Bahasa pemrograman C sangatlah fleksibel dan portebel, 
sehingga dapat di tempatkan dan di jalankan di dalam beragam sistem operasi. Pada 
umum nya, C banyak digunakan untuk melakukan interfacing antar perangkat keras 
(hardwere) agar dapat berkomunikasi satu sama lainnya. <br /> 

<a href="atas"> kembali ke atas</ a> 

</p> 

<pxa id="cpp"xstrong>pemrograman C++</strongx/a</p> 

<p> 

C++ merupakan bahasa pemrograman yang sangat populer dan telah banyak digunakan 
untuk mengembangkan perangkat lunak di berbagai bidang; seperti : telekomunikasi, 
embedded system, bisnis, dan hiburan. Salah satu kehandalan dari C++ adalah bahasa 
ini mendukung sepenuhnya konsep pemrograman berorientasi objek, atau yang lebih di 
kenal dengan OPP (object oriented programming). (cross platform), C++juga telah 
manjadi bagian hidup dari sebagian para pecinta linux.<br /> 

<a href="#atas">kembali ke atas</a> 

</p> 

<P> 

<a id="bcb"> 

<strong>pemrograman borland C++builder</strong> 

</a> 

</p> 

<P> 

C++builder adalah sebuah perangkat lunak berbasis C++ yang digunakan untuk 
melakukan pembuatan aplikasi (baik visual maupun non-visual) yang berjalan di atas 
platform microsoft Windows. Selain itu, C++builder juga banyak di gunakan sebagai alat 
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untuk pengembangan file-file DLL (Dynamic Link Library ). Dengan adanya kemudahan 
dan dukungan visual yang di tawarkan di dalamnya, C++builder banyak di gunakan oleh 
para programmer profesional untuk pengembangan aplikasi yang beraneka ragam 
jenisnya, seperti : openGL, multimedia, games, database, embedded system, dan banyak 
lagi yang lainnya.<br /> 

<a href="#atas">kembali ke atas</a> 

</p > 

</body> 

</html> 

S Simpan file dengan nama link-bagiandokumenl .html dan tempatkan ke 
dalam direktori kerja 

s Jalan file tersebut melalui web browser 

Pada latihan di atas kita membuat 4 bagian yang di jadikan sebagai tujuan link, 
yaitu : 


• Atas. Bagian ini adalah bagian paling atas dari dokumen dan berguna 
untuk kembali ke bagian menu (Jika penunjung sedang mengaktifkan 
bagian bawah dokumen) 

• C. Bagian ini adalah bagian yang menerangkan tentang buku 
pemrograman C 

• Cpp. Bagian ini adalah bagian yang menerangkan tentang buku 
pemrograman C++. 

• Bcb. Bagian ini adalah bagian yang menerangkan tentang buku 
pemrograman borland C++Builder. 

Untuk menguji cara kerja dari link di atas, coba anda klik link kedua 
(pemrograman C++), maka web browser akan menampilkan bagian yang di 
pilih, seperti ditujukan oleh gambar berikut: 

Klik link kembali ke atas jika anda ingin kembali ke tampilan semula (tampilan 
awal). 

Membuat Link ke Bagian Tertentu dalam Dokumen Lain 

s Jalankan aplikasi Text Editor 
s Buatlah dua file dan isikan kode berikut: 

dokumen-l.html 
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<html> 

<head> 

<title>Daftar IsiLink</title> 

</head> 

<body> 

<h2> Latihan Membuat ke Bagian Tertentu dalam Dokumen 
lain</h2> 

<p>Isi Bab :</p> 

<p><a href="dokumen-2.htmli#isibabl">l. Bab l</a><br> 

<a href="dokumen-2 . html#isibab2 ">2 . Bab 2</aXbr> 

<a href="dokumen-2 . html#isibab3">3 . Bab 3</aX/p> 
</body> 

</html> 

Dokumen-2.html 

<html> 

<head> 

<title>link</title> 

</head> 

<body> 

<h2>Latihan Membuat ke Bagian Tertentu dalam Dokumen 
Lain</h2> 

<p><a id="c"Xstrong>pemrograman C</strong ></a></p> 

<pXa id="cpp"Xstrong>pemrograman C++</strong ></a></p> 

<pXa id="bcb"Xstrong> Pemrograman borlond C++Builder 
</strong ></a></p> 

</body> 

</html> 
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e. Tes Formatif 

1. Bagaimana cara menyajikan link dalam dokumen tertentu pada file yang 
sama? 

2. Bagaimana cara menyajikan link dalam dokumen tertentu pada file yang 
berbeda? 

3. Jelaskan maksud dari beberapa tag link berikut ini : 

a. <a href="#top">Kembali ke atas</a> 

b. <a href="visimisi.html#visi">VISI</a> 

f. Lembar Jawaban Tes Formatif 

LJ- 01 : Cara menyajikan link dalam dokumen tertentu pada file yang sama 



LJ- 02 : Cara menyajikan link dalam dokumen tertentu pada file yang berbeda 


LJ- 03 : Penjelasan : 
























g. Lembar Kerja Peserta Didik 
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18. Kegiatan Belajar 18 : Menyajikan Format Target Link, Email dan 
Telepon 

a. Tujuan Pembelajaran 

Setelah mengikuti kegiatan belajar 18 ini Peserta Didik diharapkan dapat: 

1) Memahami Format target link, email dan telepon 

2) Menyajikan Format target link, email dan telepon 

b. Uraian Materi 

1) Menentukan Target Link 

Target atau tujuan yang dihubungkan melalui suatu link dapat ditentukan sendiri 
oleh kita. Target yang di maksud di sini adalah dimana dokumen akan 
ditempatkan atau ditampilkan. Dalam keadaan default (ketika atribut TARGET 
tidak di sertakan), dokumen baru yang ditampilkan pada saat link dipilih akan 
menutup atau menimpa dokumen lama (dokumen yang mengandung link 
bersangkutan). Untuk melakukan hal, kita hanya perlu menambahkan atribut 
TARGET di dalam tag <a>, yang memiliki bentuk umum penulisan seperti 
berikut: 


<a href="NamaDokumen" target="NamaTarget">Teks/Gambar<a/> 

NamaDokumen adalah namadokumen yang akan di tampilkan jika link 
bersangkutan dipilih/diklik dan NamaTarget adalah target atau tempat tujuan dari 
dokumen yang akan ditampilkan. NamaTarget bisa bernilai _BLANK maupun 
nama trame (jika layar web kita bagi dengan menggunakan frame) 

2) Link Email 

Selain menghubungkan antara halaman dan antara bagian-bagian dari satu 
halaman, tag <a> memungkinkan kita untuk link ke alamat email. Ini adalah cara 
paling sederhana untuk memungkinkan pengunjung halaman web kita untuk 
"mengirim pesan" kepada kita. Dengan memberikan link yang dapat diklik ke 
alamat email kita, maka mudah bagi pengunjung untuk mengirim pesan dan 
pengunjung tidak perlu mengetikkan alamat email. 

Cara penulisan link FITML ke alamat email adalah seperti berikut: 
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<a href="mailto:nama@yourdomain.com"> Kirim pesan email</a> 

Kata-kata “Kirim pesan email” akan muncul seperti link <a> lainnya . 

Jika kita ingin orang melihat alamat email kita yang sebenarnya ( sehingga 
mereka dapat mencata atau mengirim pesan menggunakan program email yang 
berbeda ), adalah seperti ini : 

<a href="mailto:nama@yourdomain.com">nama@yourdomain.com</a> 

Dalam kebanyakan web browser, bila seseorang mengklik link tersebut , maka 
terbuka sebuah jendela di mana dia dapat mengetik pesan email yang segera 
dikirimkan kepada kita 

Kita juga dapat memberikan beberapa informasi tambahan di link sehingga 
subjek dan isi pesan juga langsung tertulis. Yaitu dengan menambahkan variabel 
subject (perihal) dan body (isi pesan). Pisahkan variabel dari alamat email 
dengan tanda tanya ( ? ) , Nilai dari variabel dengan tanda sama dengan ( = ) , 
dan kemudian memisahkan masing-masing variabel dan nilai pasangan dengan 
ampersand ( & ). Berikut adalah contoh menentukan subjek dan body untuk 
contoh email sebelumnya : 

<a href = "mailto:author@somedomain.com?subject=Pertanyaan & 
body=Kapan edisi berikutnya keluar ?"> Author@somedomain.com 
</a> 

Ketika pengguna mengklik link ini , pesan email dibuat dengan 
author@somedomain.com sebagai penerima, “Pertanyaan” sebagai 
subject/perihal , dan Kapan edisi berikutnya keluar ? sebagai isi pesan . 

3) Link Telepon 

Kita juga dapat membuat link telepon di dokumen web kita. Hal ini karena banyak 
pengunjung web menggunakan smartphone untuk mengakses website kita, 
sehingga dapat digunakan untuk melakukan panggilan telepon ! Jadi kita dapat 
menuliskan nomor telepon, sehingga pengunjung dapat langsung klik untuk 
menghubungi nomor telepon terebut. Cara penulisannya adalah seperticontoh 
berikut. 

<a href="tel:0123456789">Hubungi kami di (012) 3456789 </a> 


Ketika pengguna ponsel menekan link tersebut, mereka mendapatkan kotak 
peringatan meminta mereka untuk mengkonfirmasi bahwa mereka ingin 
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melakukan panggilan telepon ke nomor tersebut . Fitur ini didukung pada 
perangkat mobile yang paling baru, termasuk iOS , Android , Blackberry , 
Symbian , Internet Explorer, dan Opera Mini. 

iPad dan iPod Touch tidak dapat membuat panggilan , tetapi akan menawarkan 
untuk membuat kontak baru dari nomor tersebut. 

Sedangkan untuk pengguna desktop tidak terjadi apa-apa untuk link tersebut. 

Ada beberapa cara terbaik untuk menggunakan link telepon : 

■ Dianjurkan agar memasukkan nomor lengkap panggilan internasional , 
termasuk kode Negara, seperti +62 untuk Indonesia, karena tidak 
diketahui di Negara mana pengguna akan mengakses web kita . 

■ menuliskan nomor telepon ke dalam isi link sehingga jika link tidak 
bekerja , nomor telepon masih terbaca . 

■ Android dan iPhone memiliki fitur yang dapat mendeteksi nomor telepon 
dan secara otomatis mengubah mereka menjadi link. Sayangnya , 
beberapa nomor 10 - digit yang bukan nomor telepon mungkin akan 
berubah menjadi link juga. Jika dokumen kita memiliki string angka yang 
mungkin akan dideteksi sebagai nomor telepon, kita dapat mengaktifkan 
auto - deteksi off dengan memasukkan elemen meta berikut dalam kepala 
dokumen kita . 


<meta name="format-detection" content="telephone=no"> 

■ 

Untuk perangkat Blackberry , menggunakan berikut: 

<meta http-equiv="x-rim-auto-match" content="none"> 

c. Rangkuman 

Dari penjelasan materi pada kegiatan belajar ini dapat dibuat rangkuman 

sebagai berikut: 

■ 

Atribut TARGET di dalam tag <a>, memiliki bentuk umum penulisan seperti 


berikut: 


<a href="NamaDokumen" 


target="NamaTarget">Teks/Gambar<a/> 

■ 

Cara penulisan link FITML ke alamat email adalah seperti berikut: 


<a href="mailto:nama@yourdomain.com"> Kirim pesan email 


</a> 

■ 

Cara penulisan link telepon adalah seperti berikut:. 
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<a href="tel:0123456789"> Hubungi kami di (012) 3456789 
</a> 

d. Tugas 

'k Isikan kode berikut: 

Link target: 

<html> 

<head> 

<title>link</title> 

</head> 

<body> 

<h2>Latihan Menampilkan Dokumen pada Window Baru</h2> 
<p>Klik salah satu link berikut:</p> 

<a href ="http ://www.w3schools.com" target="_blank"> 

W3 Schools</aXbr /> 

</body> 

</html> 

^ Simpan file dengan nama link-target.html dan tempatkan ke dalam 
direktori kerja 

'k Bukalah file tersebut menggunakan web browser 

Link Email 

<html> 

<head> 

<title>Mailto</title> 

</head> 

<body> 

kirim email ke humas SMK Bisa : <a 
href="mailto:info@smk-kita.sch.id">info@smk- 
bisa.sch.id</a> 

</body> 


202 | P a g e 










Pemrograman Web Semester 1 



</html> 


e. Tes Formatif 

1. Bagaimana cara menyajikan target link? Berikan contohnya! 

2. Buatlah link untuk berikut ini : 

a. Email : info@hotelku.com 

b. Email : cs@tokobuku.com , Subject: Tanya Buku, Isi Pesan: Apa judul buku 
baru? 

c. Telepon : 0341-491239 

d. Telepon : 0812-345-6789 

f. Lembar Jawaban Tes Formatif 

LJ- 01 : Cara menyajikan target link 


LJ- 02 : Cara menyajikan link dalam : 
a.Email : 


b.Email : 
























c.Telepon : 


d.Telepon: 


g. Lembar Kerja Peserta Didik 
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a. Tujuan Pembelajaran. 

Setelah mengikuti kegiatan belajar 19 diharapkan Peserta Didik dapat: 

1) Mengetahui penggunaan form HTML 

2) Memahami anatomi form HTML 

3) Mengetahui cara kerja form HTML 

4) Memahami cara kerja form HTML 

5) Mengidentifkasi anatomi dan cara kerja form 

b. Uraian materi. 

1) Definisi dan fungsi form 

Form merupakan salah satu bentuk halaman web yang digunakan untuk 
menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna 
tersebut diolah menggunakan bahasa pemrograman web, baik secara server 
side scripting(misalkan PHP, JSP) ataupun client-side scripting (javascript). 
Form dapat digunakan untuk berbagai keperluan seperti keperluan login, 
transaksi penjualan, mengumpulkan informasi atau meminta umpan balik dari 
pengguna, menawarkan barang/jasa secara on-line dan sebagainya. Form 
sangat sering kita jumpai dalam satu aplikasi sistem informasi berbasis web. 

2) Anatomi dari form 

Standard atau format umum penulisan dari form adalah sebagai berikut: 

<Form metode="post/get" action=".... "> 


</form> 


Berikut ini adalah beberapa variasi yang dapat diterapkan pada atribut<form> : 
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<FORM ACTION=action base> form tags </FORM> 

<FORM METHOD=method> form tags </FORM> 

<FORM ENCTYPE=media type> form tags </FORM> 

<FORM ACTION=action base TARGET="target window name"> 
form tags 

</FORM> <FORM SCRIPT=URL> form tags </FORM> 


Catatan : target window name diisikan berupa : 

_blank 

_self 

_parent 

_top 

Di antara elemen <form> dan </form> digunakan elemen - elemen HTML 
<input> yang berfungsi untuk mendefinisikan input yang akan dimasukkan 
oleh pengguna. Format umum dari penulisan elemen HTML <input> adalah 
sebagai berikut: 


<input 

name="name" 

siz e="numbe r" 

type="text"|"checkbox"|"radio"|"submit"|"reset" 
value="value" 

checked > 


Pada jenis masukan (input) dari halaman web minimal harus mempunyai 
atribut jenis (type), nama (name) dan nilai (value) default. Disamping atribut type, 
masing-masing elemen input memiliki atribut-atribut yang lain dan beberapa 
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atribut tersebut berlaku untuk beberapa jenis elemen input. Sebagai contoh 
adalah elemen <input> yang atribut TYPE-nya adalah text memiliki atribut 
antara lain : 


Name 

: untuk menamai kotak 

Value 

: untuk menandai atau menampung teks 

Size 

: mengatur ukuran teks pada kotak 

maxlength 

: menentukan panjang maksimum teks 


Masing-masing jenis input memiliki karakteristik yang berbeda, dan 
pemilihan penggunaannya disesuaikan dengan kesesuaian nilai dari input data 
yang dikelola. 

Berikut adalah salah satu contoh listing kode dari tag elemen form - input 

<form > 

Nama : <input type="text" name="fnama"xbr> 

^linp ut name="negara" value="Indonesia "> 

<input type="submit" value="Submit"> 

</form> 






/9 hidden input file 


==> 

Nama: 



jlndonesia 

Submit | 


Gambar 19.1 hidden input file 


3) Cara Kerja Form 

Form HTML digunakan untuk melewatkan data dari klien ke server. Kerja 
Web bekerja didasarkan pada arsitektur Client / server yang sangat dasar yang 
dapat diringkas sebagai berikut : klien (web browser ) mengirim permintaan ke 
server (misalnya apache , nginx , IIS , Tomcat , dan lain sebagainya ) , 
menggunakan protokol HTTP . Server menjawab requets dari form dengan 
menggunakan protokol yang sama . 
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Client 


Server 



A. Sisi Klien 


Gambar 19.2 Client - server 


Server akan memproses data dan kemudian mengirim respon kepada pengguna. 
Disisi klien memastikan data mana yang dkirim melalui elemen form. Di sisi klien 
, HTML untuk mengkonfigurasi permintaan HTTP untuk mengirim data ke server. 
Hal ini memungkinkan pengguna untuk memberikan informasi yang akan 
disampaikan dalam permintaan HTTP . 

Atribut yang sangat peran saat pengiriman data adalah action dan method . 
Atribut - atribut dari elemen HTML <form> adalah sebagai berikut : 


Atribut 

Keterangan 

Method 

Metode untuk pengiriman data ke tujuan yaitu : 

a. Get : mengirim data ke server dengan cara meletakan 

data pada bagian akhir dari Url yang dituju 

b. Post: datanya dikirim terpisah 

Action 

Aksi yang muncul ketika pengguna meneka tombol tertentu 


Atribut Action 

Atribut ini mendefinisikan mana data akan dikirim . Nilainya harus merupakan 
URL yang valid . Jika atribut ini tidak menyediakan , data akan dikirim ke URL 
halaman ini berisi formulir. Contoh penggunaan atribut action 
1 .data dikirim ke http://foo.com 


<form action="http://foo.com"> 


2.Data dikirim ke server yang sama bahwa itu host halaman form , tapi ke U 
yang berbeda pada server: 


RL 


<form action="/somewhere else"> 
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3. Tanpa atribut, seperti di bawah , atribut <form> menyebabkan data yang akan 
dikirim ke halaman yang meliputi bentuk: 

<form> 

4. Notasi berikut untuk menunjukkan bahwa data harus dikirim ke halaman yang 
sama yang berisi formulir, ini diperlukan karena sampai HTML5 , atribut tindakan 
yang diperlukan . 

<form action="#"> 


Atribut Method 

Atribut metode untuk pengiriman data menggunakan post dan get. Atribut ini 
mendefinisikan bagaimana data dikirim . Protokol HTTP menyediakan beberapa 
cara untuk melakukan permintaan , data bentuk HTML dapat dikirim melalui 
setidaknya dua dari mereka : metode GET dan metode POST . Permintaan 
HTTP terdiri dari dua bagian : sebuah header yang berisi sekumpulan metadata 
global mengenai kemampuan browser , dan body yang dapat berisi informasi 
yang diperlukan ke server untuk memproses permintaan khusus . 

Methode GET 

Metode GET adalah metode yang digunakan oleh browser untuk meminta 
server untuk mengirim kembali resource yang dib erikan :" hey , server, kirimkan 
resource ini . " Dalam hal ini , browser mengirimkan sebuah body kosong . 
Karena body kosong , jika formulir dikirim menggunakan metode ini , data yang 
dikirim ke server ditambahkan ke URL . 

Contoh penerapan mehode get pada elemen <form> 

<!DOCTYPE html> 

<html> 

<head> 

<title>cek form </title> 

</head> 

<body> 

<form action="http://foo.com" method="get"> 

<input name="say" value="Hallo"> 
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<input name="to" value="Semua"> 
<button>kirimkan salam</button> 
</form 
</body> 

</html> 


Bila listing kode diatas dijalankan maka akan menghasilkan tampilan 
sebagai berikut 

Q cek form x 

C jfile:///C:/xampp/htdocs/BukuWeb/cek,htm 




kirimkan salam 


Gambar 19.3 penerapan methode get 

Dari tampilan web pada gambar diatas, bila tombol ‘kirimkan salam” diklik 
akan mengarah ke suatu alamat web, yaitu foo.com seperti yang terlihat pada 
gambar dibawah. 




,_ 

W D Foo.com 



<- G Q www. foo. co m/?say =Ha 11 o&to =Se m ua 


Foo.com 



Gambar 19.4 hasil button dengan method get 

Dengan menggunakan method get, request HTTP aka terlihat sebagai 
berikut: 

GET /?say=Hi&to=Mom HTTP/1.1 
Host: foo.com 


Methode POST 

Metode POST sedikit berbeda , POST mengirimkan server untuk meminta 
respon yang memperhitungkan data yang tersedia dalam request. HTTP : " hey 
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Server , lihatlah data ini dan saya mengirimkan kembali hasil yang baik . " Jika 
form yang dikirim dengan menggunakan data metod POST akan ditambahkan 
dalam body dari HTTP yang request. 

Contoh penerapan mehode POST pada elemen <form> 

<!DOCTYPE html> 

<html> 

<head> 

<title>cek form </title> 

</head> 

<body> 

<form action="http://foo.com" method="post"> 

<input name="say" value="Hall"> 

<input name="to" value="Semua"> 

<button>kirim POST</button> 

</form> 

</form 
</body> 

</html> 


Bila listing kode diatas dijalankan maka akan menghasilkan tampilan 
sebagai berikut 



Gambar 19.5 penerapan methode post 


Dari tampilan web pada gambar diatas, bila tombol ‘kirim POST” diklik akan 
mengarah ke suatu alamat web, yaitu foo.com seperti yang terlihat pada 
gambar dibawah. 
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<- CD www.foo.com/?say=Hallo8(to=Semua 


Foo.com 



Gambar 19.6 hasil button dengan method post 


Dengan menggunakan method post, request HTTP akan terlihat sebagai 
berikut: 

POST / HTTP/1.1 

Host: foo.com 

Content-Type: application/x-www-form-urlencoded 

Content-Length: 13 

say=Hall&to=Semua 

Content-Length mengindikasikan ukuran dari body sedangkan Content-Type 
merupakan type data resource dari si pengirim ke server. 

B. Sisi Server 

Apapun metode HTTP yabg digunakan (get atau post), server menerima 
string yang akan di order untuk mendapatkan data list sebagai key atau nilai 
pasangan. Cara mengakses list/daftar tergantung pada platform pengembangan 
yang digunakan. 

4) Elemen form html 

Form HTML digunakan untuk memilih pelbagai macam inputan yang 
disediakan. Data bisa diinputan dalam bentuk input teks , pilihan radio button, 
check box dan lain sebagainya. Bentuk inputan tersebut dikemas elemen dalam 
tag-tag form. Berikut adalah elemen-elemen yang disediakan oleh html 
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Tag 

Deskripsi 

Format umum tag 

<forra> 

Mendefinisikan 

<form> 


untuk form bagi 

user 

</form> 

<input> 

Mendefinisikan 

<form> 


kontrol input pada 

<input type="submit" 


form 

value="Submit"> 

</form> 

<textare 

Mendefinisikan 

<textarea rows="4" cols="50"> 

a> 

kontrol input berupa 

teks yang akanditampilkan 


area teks pada 

form 

</textarea> 

<label> 

Mendefinisikan 

<form action="demo form.asp"> 


label pada tag 

<label for="buku">Buku</label> 


elemen <input> 

<input type="radio" 

name="barang" id="buku" 

value="buku"Xbr> 

</form> 

<fieldse 

Group dengan 

<form> 

t> 

element yang 

<fieldset> 


berhubungan satu 

<legend>Personalia:</legend> 


sama lain didalam 

Name: <input type="text"><br> 


form 

Email: Cinput 

typ e ="text"xbr> 

Date of birth: Cinput 

type="text"> 

</fieldset> 

</form 

<legend> 

Mendefinisikan 

<fieldset> 


judul untuk elemen 

<legend>Personalia:</legend> 


<fieldset> 

Name: <input type="text"xbr> 
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Email: Cinput 

typ e ="t e xt"Xbr> 

Date of birth: Cinput 

type="text"> 

</fieldset> 

</form 

<select> 

Merupakan daftar 

secara drop-down 

<select> 

Coption 

value="volvo">Volvo</option> 

Coption 

value="mercedes">MercedesC/option 

> 

Coption 

value="audi">Audic/option> 

c/select 


<optqrou 

p> 

Mendefinisikan 

group options yang 

berhubungan satu 

sama lain dalam 

bentuk drop-down 

list, merupakan 

bagian dari tag 

elemen <select> 

Cselect> 

Coptgroup label="Swedish Cars"> 

Coption 

value="volvo">VolvoC/option> 

Coption 

value="saab">Saabc/option> 

c/optgroup> 

Coptgroup label="German Cars"> 

Coption 

value="mercedes">MercedesC/option 

> 

Coption 

value="audi">Audic/option> 

c/optgroup> 

c/select> 

<option> 

mendefinisikan 

option pilihan 

dalam bentuk drop- 

down list, 

Cselect> 

Coption 

value="volvo">VolvoC/option> 


215 | P a g e 














merupakan bagian 

dari tag elemen 

<select> 

Coption 

value="mercedes">Mercedes</option 

> 

Coption 

value="audi">Audi</option> 

</select 

<button> 

Merupakan tombol 

<button type="button">Klik 


yang dapat diklik 

di sini!</button> 

<datalist> 

Daftar/list khusus 

<input list="browsers"> 

-> elemen 

yang didefinisikan 

<datalist id="browsers"> 

baru di 

dalam elemen tag 

<option value="Internet 

html5 

<input> 

Explorer"> 

•Coption value="Firefox"> 

•Coption value="Chrome"> 

•Coption value="Opera"> 

<option value="Safari"> 

</datalist> 

<kevaen> 

Merupakan 

<form action="demo keygen.asp" 

-> elemen 

generator key-pair 

method="get"> 

baru di 

html5 

field untuk form 

Username: cinput type="text" 

name="usr name"> 

Encryption: <keygen 

name="security"> 

<input type="submit"> 

</form> 

<OUtDUt> 

Merupakan hasil 

<f orm 

-> elemen 

dari suatu 

oninput="x.value=parselnt(a.value 

baru di 

perhitungan 

)+parselnt(b.value)">0 

html5 


•cinput type="range" id="a" 

value="50">100 

+<input type="number" id="b" 

value="50"> 

=<output name="x" for="a 
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b"x/output> 
</form> 


5) Elemen form button 

Format umum penulisan input button pada tag <form> adalah sebagai berikut: 

< button type=button> 

< button type=button name=name> 

< button type=button value=value> 

Berikut contoh listing programnya 

<!doctype html> 

<html> 

<body> 

<button type="button" onclick="alert('hallo selamat datang')"> 
klik mulai !</button> 

</body> 

</html> 

Dan contoh bentuk tampilannya adalah sebagai berikut: 

/a C:\xampp\htdocs\BukuWeb\TMP8jgszzfdxf.htm 




Gambar 19.7 tag form input button 

6) Elemen form input submit 

Format tag FITML-nya adalah sebagai berikut: 

<input type=submit> 

<input type=submit name=name> 
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<input type=submit value=value> 


Contoh bentuk tampilannya adalah sebagai berikut: 



7) Elemen form reset 

Format tag HTML-nya adalah sebagai berikut: 

CINPUT TYPE=RESET> 

Berikut adalah contoh form input yang dilengkapi tombol reset 

<!doctype html> 

<html> 

<head> 

<title>reset </title> 

</head> 

<body> 

— Indentitas diri — 

<form > 

Nama : cinput type="tex(t" name="nama"xbr> 

NIM: <input type="text' name="kelas" maxlength="8"xbr> 



& reset 


-Indentitas diri — 

Nama: 

NIM: P 
Reset 


Submit 
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cinput type="submit" value="Submit"> 

</form> 

</body> 

</html> 

Gambar 19.9 tag form input reset 


8) Contoh form sederhana 

Berikut ini adalah contoh dari sebuah halaman web yang berisi form yang sederhana : 


<html> 


<head> 


<title> 

Form 1 </title> 

</head> 


<body> 


<form name= 

"forml" method="POST" action="inputdata.php"> 

Nama : 

<input type="text" name="nama"> <brXbr> 

Kelas: 

<br><br> 

<input type="text" name="kelas" maxlength="2"> 

No : 

<br><br> 

<input type="text" name="nomor" value="10"> 

Hobby: 

<br><br> 

<input type="text" name="hobby" size="8"> 

Password: <input type="password" name="password"> 

<br><br> 


<input type="submit" name="submit" 

value="Submit">&nbsp;&nbsp;&nbsp;<input type="reset" 

name="reset" value="Reset"> 

</form> 


</body> 


</html> 
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Apabila dibuka di dalam browser, maka tampilan dari susunan kode 
HTML di atas adalah sebagai berikut: 


Nama: 
Kelas: 
No: 10 
Hobby: 
Password: 


Submit 


Reset 


Gambar 19.10 form sederhana 

Apabila tombol “Submit” diklik, maka semua nilai yang sudah diinputkan oleh 

pengguna akan di olah di dalam file PHP “inputdata.php”. 

c. Rangkuman 

Dari kegiatan belajar ini dapat dibuat rangkuman sebagai berikut: 

■ Form adalah salah satu bentuk halaman web yang digunakan untuk 
menerima masukan dari pengguna, untuk selanjutnya masukan dari 
pengguna tersebut diolah menggunakan bahasa pemrograman web, baik 
secara server side scripting(misalkan PHP, JSP) ataupun client-side 
scripting (javascript). 

■ Form dapat digunakan untuk berbagai keperluan seperti keperluan login, 
transaksi penjualan, mengumpulkan informasi atau meminta umpan balik 
dari pengguna, menawarkan barang/jasa secara on-line dan sebagainya. 

■ Disamping atribut type, masing-masing elemen input memiliki atribut-atribut 
yang lain dan beberapa atribut tersebut berlaku untuk beberapa jenis 
elemen input. Sebagai contoh adalah elemen <input> yang atribut TYPE- 
nya adalah text memiliki atribut antara lain : 

NAME, digunakan untuk menamai kotak 

- VALUE, digunakan untuk menandai atau menampung teks 

- SIZE, digunakan untuk mengatur ukuran teks pada kotak 
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MAXLENGTH, digunakan untuk menentukan panjang maksimum 
teks 

■ Form FiTML digunakan untuk melewatkan data dari klien ke server. 

■ Elemen - elemen tag form FITML , yaitu <form>, <input>, <texarea>, 
<label>, <fieldset>, <legend>, <select>, <optgroup>, <option>, <button>, 
<datalist>, <keygen>, <output>. 


d. Tugas 

Sebelum mengerjakan tugas, buatlah kelompok, terdiri atas 2-3 orang. Dalam 
kegiatan ini masing-masing kelompok kerjakan tugas berikut: 

3. Jelaskan tentang anatomi form 

4. Jelaskan tentang cara kerja dari form 

5. Jelaskan tentang macam-macam elemen tag <form> html 

Kemudian secara bergantian masing-masing kelompok mempresentasikan 
hasilnya didepan kelas. 


e. Test Formatif. 

Dalam test ini setiap peserta didik wajib membaca dengan cermat dan teliti setiap 
butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah 
jawabannya pada lembar jawaban test formatif yang telah disediakan. 

1. Tuliskan anatomi penulisan form/formulir pada html 

2. Jelaskan secara singkat cara kerja dari form 

3. Sebutkan 5 jenis elemen yang berhubungan dengan pada formulir 
HTML. 

4. Sebutkan dan jelaskan 3 elemen baru pada form html5 

f. Lembar Jawaban Test Formatif (LJ). 

LJ- 01 : anatomi penulisan form/formulir 
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LJ- 02 : cara kerja dari form 


LJ- 03 : 5 jenis elemen <form> HTML 


































LJ- 04: elemen baru pada form html5 


g. Lembar Kerja Peserta Didik. 
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20. Kegiatan Belajar 20: Menyajikan Hasil Pemformatan Form pada 
Sebuah Halaman Web 

a. Tujuan Pembelajaran. 

Setelah mengikuti kegiatan belajar 20 diharapkan Peserta Didik dapat: 

1) Memahami format formulir HTML 

2) Menyajikan hasil dari format formulir pada sebuah halaman web 

b. Uraian materi. 

1) Format umum formulir 

<Form> merupakan formulir yang digunakan sebagai perantara untuk 
memasukan data inputan ke server. Form pada HTML dibuat dengan 
menggunakan elemen form. Elemen form harus membungkus seluruh elemen- 
elemen masukan form lain untuk memastikan masukan informasi pengguna 
dapat dibaca oleh aplikasi web. 

Setiap elemen form dalam suatu halaman web harus memiliki atribut name, 
yang digunakan sebagai pengenal dari nama elemen tersebut. Setiap data yang 
dimasukkan ke dalam elemen form, akan dikirimkan kepada server. 

Browser web akan mengirimkan data dari form ke server dengan mengacu 
kepada name dari elemen. Browser akan mengambil semua data dari elemen 
input yang memiliki atribut name. Jika suatu input tidak memiliki name, maka 
data yang ada dalam elemen input tersebut tidak dikirimkan kepada server. 

Tag <form> digunakan untuk membuat form dalam document HTML. 
Penulisan format umum penulisan dari form adalah sebagai berikut: 



Terlihat pada format umum formulir diatas, bahwa penulisan form dilengkapi 
dengan atribut. Beberapa atribut yang dimiliki oleh tag <form> adalah : 
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■ Accept 

■ Accept-charset 

■ Action 

■ Autocomplete 

■ Enctype 

■ Method 

■ Name 

■ Novalidate 

■ target 

Dari sembilan atribut diatas, atribut “accept” tidak support pada penerapan 
HTML5. Pada HTML juga menyediakan atribut baru yaitu : “autocomplete” dan 
“novalidate”. 

Accept 

Atribut “accept” mendefinisikan MIME yang di izinkan oleh server yang 
memuat script untuk memproses form. Atribut “accept” tidak support pada 
penerapan HTML5. 

Penulisan atribut “accept” dapat dituliskan sebagai berikut: 

<form accept=" MIME_type"> 


MIME_type -> satu atau lebih jenis MIME yang dapat diajukan / upload. 
Untuk menentukan lebih dari satu tipe MIME, memisahkan jenis dengan 
koma. Contoh penerapan Atribut “accept” 

<!DOCTYPE html> 

<html> 

<head> 

<title>atribut form</title> 

</head> 

<body> 

<form action="demo_form.asp" accept="image/gif, image/jpeg"> 

Nama : <input type="text" name="nama"xbr> 

No.KTP: <input type="text" name="noKtp"xbr> 

File KTP: <input type="file" name="pic" id="pic"xbr> 
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<input type="submit" value="Submit"> 

</form> 

</body> 

</html> 

Pada listing kode diatas dituliskan <form accept="image/gif, image/jpeg"> 
hal ini berarti file gambar yang bisa diterima oleh server adalah gif dan jpeg. 
Bila Listing kode tersebut dijalankan maka akan menghasilkan outp ut 
sebagai berikut: 


^^^"atribut form 



C D fi le: (I/C : /xampp/htdocs/BukuWeb/cek ,htm 


Nama: 
No.KTP: 


File KTP: 
Submit 


Choose File 


No file chosen 


Gambar 20.1 penerapan atribut accept 

Accept-charset 

Atribut “accept-charset” merupakan atribut untuk menentukan karakter 
tertentu yang akan digunakan untuk pengiriman formulir. Nilai default string 
yang diterima adalah "UNKNOWN", hal ini menunjukkan pengkodean sama 
dengan pengkodean dokumen yang mengandung tag elemen <form>. 

Format umum untuk penulisan atribut “accept-charset” adalah 
<form accept-charset=' 'character_set"> 

Nilai dari “character_set”, biasanya dituliskan dalam bentuk ; 

■ UTF-8 - -> karakter encoding untuk Unicode 

■ ISO-8859-1 - karakter encoding untuk alphabet 

Secara teori setiap pengkodean karakter dapat digunakan, tetapi pada 
kenyataanya tidak semua browser dapat membacanya. Semakin banyak 
pengkodean karakter yang digunakan, semakin besar kesempatan bahwa 
browser dapat membaca karakter tesebut. 

<!DOCTYPE html> 

<html> 
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<head> 

<title>atribut form</title> 

</head> 

<body> 

<form action="demo_form.asp" accept-charset="ISO-8859-l"> 

Nama : <input type="text" name="nama"xbr> 

Sekolah: <input type="text" name="sekolah"xbr> 

<input type="submit" value="Submit"> 

</form> 

</body> 

</html> 

Bila listing kode diatas dijalankan maka akan menghasilkan tampilan 
sebagai berikut: 



atribut form 



C D f i le: ///C: /xampp/htdocs/BukuWeb/cek .htm 


Nama: 
Sekolah: 
Submit 


Gambar 20.2 penerapan atribut accept-charset 


Action 

Atribut action digunakan untuk mengirimkan data form ketika form disubmit, 
atau dapat dikatakan Aksi yang muncul ketika pengguna menekan tombol 
tertentu. Action menentukan lokasi dari script yang akan memproses data 
dari form. Format umum penulisan atribut action adalah 
<form actio n="URL"> 

Nilai dari URL diatas alamat kemana data dikirimkan. Penulisan alamat URL 
dapat dituliskan sebagai berikut : 

■ URL absolut ^action="http://www.example.com/example.htm") 

■ URL relatif -> action="example.htm" 


Penulisan atribut action adalah sebagai berikut: 
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<!DOCTYPE html> 

<html> 

<head> 

<title>atribut form</title> 

</head> 

<body> 

<form action="demo_form.asp" accept-charset="ISO-8859-l"> 

Nama : <input type="text" name="nama"xbr> 

Sekolah: <input type="text" name="sekolah"xbr> 

<input type="submit" value="Submit"> 

</form> 

</body> 

</html> 

Bila listing kode diatas dijalankan maka akan menghasilkan tampilan 
sebagai berikut: 



atribut form 



C D f i le : ///C : /xampp/htdocs/BukuWeb/cek .htm 


Nama: 
Sekolah: 
Submit 


Gambar 20.3 penerapan atribut action 


Autocomplete 

Dengan atribut autocomplete , memungkinkan form dapat menentukan memiliki 
autocomplete on atau off. Atribut autocomplete merupakan atribut baru di 
HTML5. Format penulisanya adalah sebagai berikut: 

<form autocomplete="on|off"> 

Nilai dari atribut autocomplate : 

On --merupakan nilai default. Browser akan membaca data isian form sudah 
lengkap berdasarkan data isian sebelumnya. Sehingga user tidak perlu 
menuliskan semua data, bisa dibantu dengan atribut autocomplete 
untuk meneruskan data yang akan ditulis. 
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Off -> browser tidak secara otomatis membaca data isian form dari data 
sebelumnya, sehingga user harus menuliskan data secara lengkap 
pada tiap field form setiap kali user akan mengisikan data. 

Penulisan atribut autocomplete adalah sebagai berikut 


<!DOCTYPE html> 

<html> 

<head> 

<title>atribut form</title> 

</head> 

<body> 

<form action="demo_form.asp" method="get" 
autocomplete="on"> 

Nama:<input type="text" name="nama"xbr> 

Alamat: <input type="alamat" name="alamat"xbr> 
<input type="submit"> 

</form> 

</body> 

</html> 

Bila listing kode diatas dengan atribut autocomplete = "on" 
dijalankan maka akan menghasilkan tampilan sebagai berikut: 



G D file:///C:/xampp/htdocs/BukuWeb/cek.htm 

Nama: Daya| 

Alamat: 


Submit 

Gambar 20.4 penerapan atribut autocomplete, dengan data isian baru 

Dari gambar diatas, pada fiels “nama” akan diisi nama “dayandra, user harus 
melengkapi menuliskan nama sampai selesai, karena belum ada data 
sebelumnya yang mengisikan nama : dayandra. Bila data di field “nama” dan 
“Alamat” diisi dan dikemudian disubmit maka browser akan mengenali isian 
datanya bila dilain waktu ada user yang mengisi dengan isian yang sama. Hal ini 
terlihat pada tampilan berikut: 


229 | P a g e 










17 atribut form 



-> C file:///C:/xamppAitdocs/BukuWeb/cek.htm 

Nama:jda 
Alamat Dayandra 


Submit 


Gambar 20.5 penerapan atribut autocomplete, dengan data isian autocomplete 


Dari gambar dapat dilihat, saat menuliskan kata “da” maka akan muncul pilihan 
dayandra, data dayandra merupakan data yang telah diisika ke field sebelumnya. 


Method 

Atribut method adalah atribut yang wajib dicantumkan saat penulisan <form> 
karena atribut method merupakan metode untuk pengiriman data ke tujuan yaitu : 

Get: 

- mengirim data ke server dengan cara meletakan data pada bagian akhir 
dari Url yang dituju 

metode yang digunakan oleh browser untuk meminta server untuk 
mengirim kembali sumber daya yang diberikan 

Post 

- datanya dikirim terpisah 

metode browser mengirimkan server untuk meminta respon yang 
memperhitungkan data yang tersedia dalam tubuh permintaan HTTP 

Format penulisanya adalah sebagai berikut: 


<form method="get|post"> 


Penulisan atribut autocomplete adalah sebagai berikut 

<!DOCTYPE html> 

<html> 

<head> 

<title>atribut form</title> 

</head> 

<body> 

<form action="demo form.asp" method="get" 
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autocomplete="on"> 

Nama:<input type="text" name="nama"xbr> 

Alamat: cinput type="alamat" name="alamat"><br> 
cinput type="submit"> 

</form> 


</body> 

</html> 


Bila listing kode diatas dengan atribut dijalankan maka akan 


method="get" menghasilkan tampilan sebagai berikut: 



-> G D fi le: ///C: /xampp/htdocs/BukuWeb/cek ,htm 


Nama: 

Alamat: 

Submit 

Gambar 20.6 penerapan atribut method=get 


Enctype 

Atribut enctype merupakan atribut yang menentukan bagaimana data form 
dikirim ke server. Atribut enctype hanya digunakan saat form menggunakan 
method=post. 

Format penulisanya adalah sebagai berikut: 

<form enctype='Vo/tve"> 

Adapun nilai(value) yang dapat diisikan kedalam atribut anctype adalah : 


Value 

Description 

application/x-www-form- 

urlencoded 

Merupakan nilai default. Semua karakter 
dikodekan sebelum dikirimkan. Spasi 
dikodekan dalam simbol +, dan spesial karakter 
lainya di kodekan dalam nilai ASCII HEX 

multipart/form-data 

Tidak ada karakter yang dikodekan. 

text/plain 

Spasi dikodekan dalam simbol +. Spesial 
karakter lainya tidak di kodekan dalam nilai 

ASCII HEX 

Penulisan atribut enctype adalah sebagai berikut 
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<!DOCTYPE html> 

<html> 

<head> 

<title>atribut form</title> 

</head> 

<body> 

<form action="demo_post enctype.asp" 
method="post" enctype="multipart/form-data"> 

Nama:<input type="text" name="nama"xbr> 

Alamat: <input type="alamat" name="alamat"xbr> 

<input type="submit"> 

</form> 

</body> 

</html> 

Bila listing kode diatas dengan atribut dijalankan maka akan 
enctype="muitipart/form-data" menghasilkan tampilan sebagai 
berikut: 



-> C D fi le: ///C: /xampp/htdocs/BukuWeb/cek .htm 


Nama: 

Alamat: 

Submit 

Gambar 20.7 penerapan atribut anctype 


Name 

Atribut “name” merupakan atribut untuk memberi nama pada form. Atribut 
name digunakan untuk referensi elemen dalam JavaScript, atau untuk 
referensi data formulir setelah formulir dikirimkan. Format umum penulisan 
atribut name adalah sebagai berikut: 

<form name="fexf"> 

Dimana nilai dari atribut name berupa text. Berikut adalah penerapan dari 
atribut name 
<!DOCTYPE html> 

<html> 
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<head> 

<script> 

function formSubmit() 

{ 

document.forms["myForm"].submit(); 

} 

</script> 

</head> 

<body> 

<form name="fromSaya" action="form_submit.asp" method="get"> 

Nama: <input type="text" name="nama"xbr> 

Alamat: <input type="text" name="alamat"><brxbr> 

<input type="button" onclick="formSubmit()" value="kirim data!"> 

</form> 

</body> 

</html> 

Dari listing kode diatas dapat dilihat bahwa <form name="fromSaya"> yang 
artinya form yang dibuat bernama “formSaya”.nama form = formSaya 
tersebut akan diberitahukan ke elemen Javascript.Bila listing kode tersebut 
dijalankan maka akan menghasilkan tampilan sebagai berikut: 




C 

D file:///C:/xampp/htdocs/BukuWeb/cek.htm 

Nama: 


Alamat: j 



kirim data! 



Gambar 20.8 penerapan atribut name 


Novalidate 

Atribut “novalidate” memperintahkan bahwa data form tidak divalidasi saat di 
submit. Atribut ini merupakan atribut baru pada HTML5 dan hanya berjalan di 
browser Internet Explorer 10, Firefox, Opera, dan Chrome. Atribut “novalidate” 
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tidak support ketika dijalankan pada browser Internet Explorer versi 9 ke bawah 
dan safari. 

Format penulisan secara umum 

<form novalidate> 

Berkut adalah salah satu penerapan dari atribut “novalidate”. 

<!doctype html> 

<html> 

<head> 

<title>cek form </title> 

</head> 

<body> 

<form action="demo form.asp" novalidate> 
e-mail: <input type="email" name="user email"> 

<input type="submit"> 

</form> 

</body> 

</html> 


Bila listing kode di atas dijalan akan menampilkan output sebagai berikut 



C □ file:///C:/xampp/htdocs/BukuWeb/cek.htm 



Submit 


Gambar 20.9 penerapan atribut novalidate 
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target 

Atribut “target” merupakan atribut yang dapat berjalan disemua browser. 
Atribut “target” menentukan nama atau keyword yang mengindikasikan dimana 
respon dari form akan ditampilkan, misanya tab, window, atau dalam frame 
Catatan : target window name diisikan berupa : 


Value 

Description 

blank 

Respon ditampilkan dalam new window or tab 

_self 

Respon ditampilkan dalam frame yang sama (default) 

_parent 

Respon ditampilkan dalam parent frame 

_top 

Respon ditampilkan dalam window full body 

framename 

Respon ditampilkan dalam iframe 


Format umu dari penulisan atribut target 


<form target="_blank|_self |_parent|_top|/romenome"> 

Berikut adalah listing kode atribut target menggunakan value _blank 

<!DOCTYPE html> 

<html> 

<head> 

<title>cek form </title> 

</head> 

<body> 

<form action="demo form.asp" method="get" target=" blank"> 
Nama : <input type="text" name="fname"Xbr> 

Alamat : <input type="text" name="lname"Xbr> 

<input type="submit" value="Submit"> 

</form 
</body> 

</html> 

Ketika listing kode dijalankan akan menampilkan hasil seperti berikut: 
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Gambar 20.10 hasil button submit 

Setelah listing kode dijalankan maka akan terbuka window 1 yan berisi text 
field untuk mengisi nama dan alamat. Setelah data nama - alamat diisikan 
dan form disubmit maka akan terbuka window baru seperti pada window 2. 


3) Format formulir secara horisontal 

Untuk membuat tampilan dari sebuah form menjadi lebih tertata dengan rapi, 
umumnya digunakan elemen HTML <table> untuk memformat form tersebut. 
Secara umum layout dari form adalah layout horizontal, yakni layout dimana 
setiap input ditempatkan di samping dari label keterangan masing- masing input 
tersebut. Berikut ini adalah contoh dari penggunaan elemen <table> untuk 
memformat tampilan form secara horizontal : 

<html> 

<head><title>CONTOH TAG FORM</title></head> 

<body> 

<form method="Post"> 
ctable border=0 width="75%"> 

<tr> 

<td width="25%">NPM</td> 

<tdXINPUT TYPE="TEXT" Name="NPM" MAXLENGTH="10" 

SIZE="11"></td> 

</tr> 

<tr> 

<td width="25%">Nama Mahasiswa</td> 

<tdXINPUT TYPE="TEXT" Name="NamaMHS" MAXLENGTH="2 5" 
SIZE="25"X/td> 

</tr> 
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<tr> 

<td width="25%">Alamat</td> 

<td><INPUT TYPE="TEXT" Name="Alamat" MAXLENGTH="50" 
SIZE="40"></td> 

</tr> 

<tr> 

<td width="25%">Jenis Kelamin</td> 

<td><INPUT TYPE="RADIO" Name="Jenkel" CHECKED 
VALUE="Laki2">Laki-laki 

CINPUT TYPE="RADIO" Name="Jenkel" 

VALUE="Perempuan">Perempuan 
</td> 

</tr> 

<tr> 

<tr> 

<td width="25%">Jurusan</td> 

<td><SELECT Name="Jurusan"> 

COPTION VALUE="KA">Komputer Akuntansi 
<OPTION VALUE="MI">Manajemen Informatika 
COPTION VALUE="TK">Teknik Komputer 
</SELECT> 

</td> 

</tr> 

<tr> 

<td width="25%">Fasilitas</td> 

<tdXINPUT TYPE="CHECKBOX">Flash Disk</td> 

</tr> 

<tr> 

<td></td><tdXINPUT TYPE="CHECKBOX">Bakal Baju</td> 
</tr> 

<tr> 

CtdX/tdXtdXINPUT TYPE="CHECKBOX">Bakal Jas</td> 
</tr> 

<td></td> 

<tdXINPUT TYPE="SUBMIT" VALUE="Simpan"> 

CINPUT TYPE="RESET" VALUE="Batal"> 

</td> 

</tr> 

</table> 

</form> 

Dan berikut ini adalah tampilan dari form yang telah di tulis di atas : 
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NPM 

Nama Mahasiswa 

Alamat 

Jenis Kelamin 

Jurusan 

Fasilitas 


° Laki-laki Perempuan 
Komputer Akuntansi ▼ 

Flash Disk 


Bakal Baju 
Bakal Jas 


Simpan 


Batal 


Gambar 20.11 tampilan form secara horisontal 

4) Format formulir secara vertikal 

Sejalan dengan perkembangan teknologi mobile, halaman web yang berbasis 
mobile tentunya sebuah halaman web di dalam perangkat mobile akan 
memerlukan form di dalam menerima input dari pengguna. Untuk menyesuaikan 
dengan lebar layar dari perangkat mobile, misalkan handphone ataupun ipad, 
maka layout dari sebuah halaman web harus disesuaikan, termasuk juga untuk 
layout dari sebuah form. Umumnya apabila sebuah form akan digunakan pada 
aplikasi mobile, layout yang diterapkan adalah layout secara vertikal, sesuai 
dengan karakteristik layar yang tidak terlalu besar. Berikut ini adalah contoh dari 
sebuah form dengan layout vertikal. 

<!DOCTYPE html> 

<html> 

<head> 

<title>cek form </title> 

</head> 

<body> 

<FORM METHOD="POST" 

ACTION="mailto:teknisi@jardiknas . org"> 

<H4>FORM DATA SISWA</H4> 

CINPUT TYPE="text" NAME="varl" SIZE="30" 
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VALUE="Masukan nama."> 


<BRXBR> 

<B>Apakah Anda Siswa?</B> 

<INPUT TYPE="checkbox" NAME="var2"> 

<BRXBR> 

<B>Berapa umur Anda?</B> 

<BR> 

<INPUT TYPE="radio" NAME="var3" VALUE="rl">10 - 15 
<BR> 

<INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20 
<BR> 

<INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25 
<BRXBR> 

<INPUT TYPE="submit" NAME="var4" VALUE="Kirim"> 
<INPUT TYPE="reset" NAME="var5" VALUE="Hapus"> 

</form 
</body> 

</html> 


Dan hasil dari halaman form yang telah ditulis di atas adalah sebagai berikut: 
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Q cekform 

C 



D f i le: ///C: /xamppA^tdocs/BukuWeb/cek ,htm 


FORM DATA SISWA 


jMasukan nama. 


Apakah Anda Siswa? 

Berapa umur Anda? 

010-15 

16-20 

21-25 


Kirim 


Hapus 


Gambar 20.12 tampilan form secara vertikal 


c. Rangkuman 

Dari kegiatan belajar menyajikan form pada halaman web dapat dibuat 
kesimpulan sebagai berikut: 

■ <Form> merupakan formulir yang digunakan sebagai perantara untuk 
memasukan data inputan ke server. 

■ Browser web akan mengirimkan data dari form ke server dengan 
mengacu kepada name dari elemen. 

■ Beberapa atribut yang dimiliki oleh tag <form> adalah : 

- Accept 

- Accept-charset 
Action 

- Autocomplete 
Enctype 
Method 
Name 
Novalidate 

- target 

■ Untuk mengimbangi perkembangan teknologi mobile adakalanya form 
dilayout secara vertikal 
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d. Tugas 

Sebelum mengerjakan tugas, buatlah kelompok, terdiri atas 2-3 orang. Dalam 
kegiatan ini masing-masing kelompok kerjakan tugas berikut: 

1. Fungsi dari form 

2. Buatlah contoh penyajian form dengan menggunakan ke 9 atribut dari 
elemen form 

3. Buatlah form sederhana yang disajikan secara horisontal 

4. Buatlah form sederhana yang disajikan secara vertikal 

Kemudian secara bergantian masing-masing kelompok mempresentasikan 
hasilnya didepan kelas. 

e. Test Formatif. 

Dalam test ini setiap peserta didik wajib membaca dengan cermat dan teliti setiap 
butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah 
jawabannya pada lembar jawaban test formatif yang telah disediakan. 

1. Tuliskan dan jelaskan tentang format umum penulisan elemen form 

2. Sebutkan 2 atribut baru dari elemen form yang di FITML5 

3. Jelaskan fungsi masing-masing atribut dari elemen form 

4. Buatlah form sederhana dengan format 


f. Lembar Jawaban Test Formatif (LJ). 

LJ- 01 : penulisan form/formulir 


LJ- 02 : 3 atribut baru di FITML5 
















LJ- 03 : fungsi masing-masing atribut dari elemen form 



































g. Lembar Kerja Peserta Didik. 
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